แก้ไขการแก้ไขอาร์เรย์ของรัฐใน ReactJS

ฉันต้องการเพิ่มองค์ประกอบไปยังจุดสิ้นสุดของstateอาร์เรย์นี่เป็นวิธีที่ถูกต้องหรือไม่

this.state.arrayvar.push(newelement);
this.setState({arrayvar:this.state.arrayvar});

ฉันกังวลว่าการแก้ไขอาร์เรย์ในสถานที่pushอาจทำให้เกิดปัญหา - ปลอดภัยหรือไม่

ทางเลือกในการทำสำเนาของอาร์เรย์และsetStateดูเหมือนว่าสิ้นเปลือง

React เอกสารพูดว่า:

ปฏิบัติต่อสิ่งนี้รัฐราวกับว่ามันไม่เปลี่ยนรูป

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

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

this.setState(prevState => ({
  arrayvar: [...prevState.arrayvar, newelement]
}))

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

ไวยากรณ์ทางเลือกสำหรับเวอร์ชัน React รุ่นก่อนหน้า

คุณสามารถใช้concatเพื่อรับไวยากรณ์ใหม่ทั้งหมดเนื่องจากมันจะส่งคืนอาร์เรย์ใหม่:

this.setState({ 
  arrayvar: this.state.arrayvar.concat([newelement])
})

ใน ES6 คุณสามารถใช้ตัวดำเนินการกระจายได้ :

this.setState({
  arrayvar: [...this.state.arrayvar, newelement]
})

ES6ง่ายที่สุดถ้าคุณกำลังใช้

initialArray = [1, 2, 3];

newArray = [ ...initialArray, 4 ]; // --> [1,2,3,4]

อาร์เรย์ใหม่จะเป็น [1,2,3,4]

เพื่ออัปเดตสถานะของคุณในการตอบสนอง

this.setState({
         arrayvar:[...this.state.arrayvar, newelement]
       });

เรียนรู้เพิ่มเติมเกี่ยวกับการทำลายล้างอาร์เรย์

วิธีที่ง่ายที่สุดด้วยES6:

this.setState(prevState => ({
    array: [...prevState.array, newElement]
}))

ปฏิกิริยาอาจแบตช์อัพเดทและดังนั้นวิธีการที่ถูกต้องคือการให้ setState ด้วยฟังก์ชั่นที่ดำเนินการปรับปรุง

สำหรับ Addact การอัพเดท React ข้อมูลต่อไปนี้จะทำงานได้อย่างน่าเชื่อถือ:

this.setState( state => update(state, {array: {$push: [4]}}) );

หรือสำหรับ concat ():

this.setState( state => ({
    array: state.array.concat([4])
}));

ต่อไปนี้แสดงสิ่งที่https://jsbin.com/mofekakuqi/7/edit?js,outputเป็นตัวอย่างของสิ่งที่เกิดขึ้นหากคุณทำผิด

การเรียกใช้ setTimeout () เพิ่มอย่างถูกต้องสามรายการเนื่องจาก React จะไม่อัปเดตแบตช์ในการโทรกลับ setTimeout (ดูhttps://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ )

buggy onClick จะเพิ่ม "สาม" เท่านั้น แต่อันที่แก้ไขจะเพิ่ม F, S และ T ตามที่คาดไว้

class List extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      array: []
    }

    setTimeout(this.addSome, 500);
  }

  addSome = () => {
      this.setState(
        update(this.state, {array: {$push: ["First"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Second"]}}));
      this.setState(
        update(this.state, {array: {$push: ["Third"]}}));
    };

  addSomeFixed = () => {
      this.setState( state => 
        update(state, {array: {$push: ["F"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["S"]}}));
      this.setState( state => 
        update(state, {array: {$push: ["T"]}}));
    };



  render() {

    const list = this.state.array.map((item, i) => {
      return <li key={i}>{item}</li>
    });
       console.log(this.state);

    return (
      <div className='list'>
        <button onClick={this.addSome}>add three</button>
        <button onClick={this.addSomeFixed}>add three (fixed)</button>
        <ul>
        {list}
        </ul>
      </div>
    );
  }
};


ReactDOM.render(<List />, document.getElementById('app'));

ตามที่ @nilgun กล่าวถึงในความคิดเห็นคุณสามารถใช้ผู้ช่วยเหลือที่ไม่สามารถโต้ตอบได้ ฉันพบว่าสิ่งนี้มีประโยชน์มาก

จากเอกสาร:

ดันง่าย

var initialArray = [1, 2, 3];
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4]

initialArray ยังคงเป็น [1, 2, 3]

หากคุณกำลังใช้งานส่วนประกอบโปรดใช้สิ่งนี้ดังต่อไปนี้

const [chatHistory, setChatHistory] = useState([]); // define the state

const chatHistoryList = [...chatHistory, {'from':'me', 'message':e.target.value}]; // new array need to update
setChatHistory(chatHistoryList); // update the state

สำหรับองค์ประกอบใหม่ที่เพิ่มเข้าไปในอาร์เรย์push()ควรเป็นคำตอบ

สำหรับการลบองค์ประกอบและอัพเดทสถานะของอาร์เรย์รหัสด้านล่างใช้งานได้สำหรับฉัน splice(index, 1)ไม่สามารถทำงานได้

const [arrayState, setArrayState] = React.useState<any[]>([]);
...

// index is the index for the element you want to remove
const newArrayState = arrayState.filter((value, theIndex) => {return index !== theIndex});
setArrayState(newArrayState);

ฉันพยายามที่จะผลักดันค่าในสถานะอาร์เรย์และตั้งค่าเช่นนี้และกำหนดอาร์เรย์ของรัฐและมูลค่าการผลักดันโดยฟังก์ชั่นแผนที่

 this.state = {
        createJob: [],
        totalAmount:Number=0
    }


 your_API_JSON_Array.map((_) => {
                this.setState({totalAmount:this.state.totalAmount += _.your_API_JSON.price})
                this.state.createJob.push({ id: _._id, price: _.your_API_JSON.price })
                return this.setState({createJob: this.state.createJob})
            })

สิ่งนี้ทำงานสำหรับฉันที่จะเพิ่มอาร์เรย์ภายในอาร์เรย์

this.setState(prevState => ({
    component: prevState.component.concat(new Array(['new', 'new']))
}));

นี่คือตัวอย่างของ Reactjs Hook ปี 2020 ที่ฉันคิดว่าสามารถช่วยเหลือผู้อื่นได้ ฉันใช้มันเพื่อเพิ่มแถวใหม่ลงในตาราง Reactjs แจ้งให้เราทราบหากฉันสามารถปรับปรุงบางสิ่งได้

การเพิ่มองค์ประกอบใหม่ให้กับองค์ประกอบสถานะการทำงาน:

กำหนดข้อมูลสถานะ:

    const [data, setData] = useState([
        { id: 1, name: 'John', age: 16 },
        { id: 2, name: 'Jane', age: 22 },
        { id: 3, name: 'Josh', age: 21 }
    ]);

มีปุ่มเปิดใช้งานฟังก์ชั่นเพื่อเพิ่มองค์ประกอบใหม่

<Button
    // pass the current state data to the handleAdd function so we can append to it.
    onClick={() => handleAdd(data)}>
    Add a row
</Button>

function handleAdd(currentData) {

        // return last data array element
        let lastDataObject = currentTableData[currentTableData.length - 1]

        // assign last elements ID to a variable.
        let lastID = Object.values(lastDataObject)[0] 

        // build a new element with a new ID based off the last element in the array
        let newDataElement = {
            id: lastID + 1,
            name: 'Jill',
            age: 55,
        }

        // build a new state object 
        const newStateData = [...currentData, newDataElement ]

        // update the state
        setData(newStateData);

        // print newly updated state
        for (const element of newStateData) {
            console.log('New Data: ' + Object.values(element).join(', '))
        }

}

this.setState({
  arrayvar: [...this.state.arrayvar, ...newelement]
})

//------------------code is return in typescript 

const updateMyData1 = (rowIndex:any, columnId:any, value:any) => {

    setItems(old => old.map((row, index) => {
        if (index === rowIndex) {
        return Object.assign(Object.assign({}, old[rowIndex]), { [columnId]: value });
    }
    return row;
}));

รหัสนี้ใช้ได้กับฉัน:

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