javascript - วิธีที่ถูกต้องในการเพิ่มข้อมูลเข้าไปในอาเรย์ของ state

ดูเหมือนว่าฉันกำลังมีปัญหาในการใส่ข้อมูลเข้าไปในอาร์เรย์สถานะ ฉันกำลังพยายามทำให้สำเร็จด้วยวิธีนี้:

this.setState({ myArray: this.state.myArray.push('new value') })

แต่ฉันเชื่อว่านี่เป็นวิธีที่ไม่ถูกต้องและทำให้เกิดปัญหาเกี่ยวกับความสามารถในการเปลี่ยนแปลงได้หรือไม่?

คำตอบ #1

การใช้ ES6 สามารถทำได้แบบนี้:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

ซินแทกซ์แบบกระจาย

คำตอบ #2

คอมโพเนนต์ฟังก์ชันและ React Hooks

const [array,setArray] = useState([]);

เพิ่มค่าที่ท้าย:

setArray(oldArray => [...oldArray,newValue] );

เพิ่มค่าที่จุดเริ่มต้น:

setArray(oldArray => [newValue,...oldArray] );

คำตอบ #3

การ push ของอาร์เรย์จะคืนค่าความยาว

this.state.myArray.push('new value') คืนค่าความยาวของอาร์เรย์ที่ขยายออก แทนที่จะคืนค่าอาร์เรย์เอง Array.prototype.push()

ฉันเดาว่าคุณคาดหวังค่าที่ส่งกลับว่าจะเป็นอาร์เรย์

ความไม่เปลี่ยนแปลง

ดูเหมือนว่านี่จะเป็นพฤติกรรมของ React:

อย่าเปลี่ยน this.state โดยตรง เพราะการเรียกใช้ setState() หลังจากนั้นอาจแทนที่การเปลี่ยนแปลงที่คุณทำ พิจารณา this.state ราวกับว่ามันไม่สามารถเปลี่ยนแปลงได้ React.Component

ฉันเดาว่าคุณคงทำแบบนี้ (ไม่คุ้นเคยกับ React):

this.setState({ myArray: [...this.state.myArray, 'new value'] })

คำตอบ #4

ไม่แนะนำให้เปลี่ยนแปลงสถานะโดยตรง

แนวทางที่แนะนำในเวอร์ชันล่าสุดของ React คือการใช้ฟังก์ชันอัปเดตเมื่อแก้ไขสถานะเพื่อป้องกันสภาวะการแข่งขัน:

ผลักสตริงไปที่ท้ายอาร์เรย์

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

ผลักสตริงไปที่จุดเริ่มต้นของอาเรย์

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

ผลักวัตถุไปยังท้ายอาเรย์

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

ผลักวัตถุไปยังจุดเริ่มต้นของอาเรย์

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

คำตอบ #5

คุณไม่ควรต้องดำเนินการกับสถานะโดยตรงเลย อย่างน้อยก็ไม่ใช่โดยตรง หากคุณต้องการอัปเดตอาร์เรย์ของคุณ คุณจะต้องทำบางอย่างแบบนี้

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

การทำงานกับวัตถุ state โดยตรงไม่เป็นที่ต้องการ คุณยังสามารถดูตัวช่วยเรื่องความไม่เปลี่ยนแปลงของ React ได้ด้วย

https://facebook.github.io/react/docs/update.html

คำตอบ #6

ที่นี่คุณไม่สามารถผลักวัตถุเข้าไปในอาร์เรย์สถานะแบบนี้ได้ คุณสามารถผลักมันแบบที่คุณทำในอาร์เรย์ปกติได้ ที่นี่คุณต้องตั้งค่าสถานะ

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

คำตอบ #7

คุณสามารถใช้เมธอด .concat เพื่อสร้างสำเนาของอาเรย์ของคุณพร้อมกับข้อมูลใหม่ได้:

this.setState({ myArray: this.state.myArray.concat('new value') })

แต่ต้องระวังพฤติกรรมพิเศษของเมธอด .concat เมื่อส่งอาร์เรย์ - [1, 2].concat(['foo', 3], 'bar') จะได้ผลลัพธ์เป็น [1, 2, 'foo', 3, 'bar'].

คำตอบ #8

การใช้ React Hooks คุณสามารถทำได้ดังต่อไปนี้

const [countryList, setCountries] = useState([]);


setCountries((countryList) => [
        ...countryList,
        "India",
      ]);