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

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

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

Array push ส่งกลับความยาว

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

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

การเปลี่ยนไม่ได้

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

อย่ากลายพันธุ์ this.state โดยตรงเนื่องจากการเรียก setState () ในภายหลังอาจแทนที่การกลายพันธุ์ที่คุณทำ ปฏิบัติต่อสิ่งนี้รัฐราวกับว่ามันไม่เปลี่ยนรูป ปฏิกิริยาส่วนประกอบ .

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

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

การใช้ es6 สามารถทำได้ดังนี้:

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

กระจายไวยากรณ์

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

แนวทางที่แนะนำใน 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]
}))

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

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

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

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

คุณสามารถใช้.concatวิธีการสร้างสำเนาอาร์เรย์ของคุณด้วยข้อมูลใหม่:

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

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

รหัสนี้ใช้ได้ผลสำหรับฉัน:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

ตอบสนองพื้นเมือง

หากคุณต้องการให้ UI ของคุณ (เช่น ur flatList) เป็นปัจจุบันให้ใช้ PrevState: ในตัวอย่างด้านล่างหากผู้ใช้คลิกที่ปุ่มระบบจะเพิ่มวัตถุใหม่ลงในรายการ (ทั้งในรุ่นและ UI )

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

ด้วยวิธีต่อไปนี้เราสามารถตรวจสอบและอัปเดตวัตถุได้

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

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

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

หากคุณแค่พยายามอัปเดตสถานะเช่นนั้น

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

พิจารณาแนวทางนี้

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

โดยทั่วไปแล้ว prevState กำลังเขียน this.state ให้เรา