Modifikasi yang benar dari array negara di ReactJS

Saya ingin menambahkan elemen ke akhir a state array, apakah ini cara yang benar untuk melakukannya?

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

Saya khawatir bahwa memodifikasi array di tempat pushdapat menyebabkan masalah - apakah aman?

Alternatif membuat salinan array, dan setStateitu tampak boros.

The React docs mengatakan:

Perlakukan ini. Negara seolah-olah itu tidak berubah.

Anda pushakan mengubah status secara langsung dan yang berpotensi menyebabkan kode rawan kesalahan, bahkan jika Anda "mengatur ulang" status lagi setelahnya. F. mis, itu bisa menyebabkan beberapa metode siklus hidup seperti componentDidUpdatetidak akan memicu.

Pendekatan yang disarankan dalam versi Bereaksi yang berikutnya adalah menggunakan fungsi pembaru ketika memodifikasi kondisi untuk mencegah kondisi balapan:

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

Memori "limbah" bukan masalah dibandingkan dengan kesalahan yang mungkin Anda hadapi menggunakan modifikasi keadaan non-standar.

Sintaks alternatif untuk versi Bereaksi sebelumnya

Anda dapat menggunakan concatuntuk mendapatkan sintaks yang bersih karena mengembalikan array baru:

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

Di ES6 Anda dapat menggunakan Penyebar Operator :

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

Paling mudah, jika Anda menggunakan ES6.

initialArray = [1, 2, 3];

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

Array baru akan menjadi [1,2,3,4]

untuk memperbarui keadaan Anda di Bereaksi

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

Pelajari lebih lanjut tentang perusakan array

Cara paling sederhana dengan ES6:

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

Bereaksi dapat mengumpulkan pembaruan, dan oleh karena itu pendekatan yang benar adalah menyediakan setState dengan fungsi yang melakukan pembaruan.

Untuk addon pembaruan Bereaksi, yang berikut ini akan berfungsi:

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

atau untuk concat ():

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

Berikut ini menunjukkan apa yang https://jsbin.com/mofekakuqi/7/edit?js,output sebagai contoh tentang apa yang terjadi jika Anda salah.

Doa setTimeout () menambahkan tiga item dengan benar karena React tidak akan mengelompokkan pembaruan dalam callback setTimeout (lihat https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

OnClick yang buggy hanya akan menambahkan "Ketiga", tetapi yang tetap, akan menambahkan F, S dan T seperti yang diharapkan.

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'));

Seperti @nilgun disebutkan dalam komentar, Anda dapat menggunakan help immutability react . Saya menemukan ini sangat berguna.

Dari dokumen:

Dorong sederhana

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

initialArray masih [1, 2, 3].

Jika Anda menggunakan komponen fungsional, harap gunakan ini seperti di bawah ini.

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

Untuk menambahkan elemen baru ke dalam array, push()harus jawabannya.

Untuk menghapus elemen dan memperbarui status array, kode di bawah ini berfungsi untuk saya. splice(index, 1)tidak bisa bekerja.

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);

Saya mencoba untuk mendorong nilai dalam keadaan array dan menetapkan nilai seperti ini dan menentukan status array dan nilai push berdasarkan fungsi peta.

 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})
            })

Ini berhasil bagi saya untuk menambahkan array dalam array

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

Inilah contoh 2020, Reactjs Hook yang saya pikir dapat membantu orang lain. Saya menggunakannya untuk menambahkan baris baru ke tabel Reactjs. Beri tahu saya jika saya bisa memperbaiki sesuatu.

Menambahkan elemen baru ke komponen status fungsional:

Tentukan data status:

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

Memiliki tombol memicu fungsi untuk menambahkan elemen baru

<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;
}));

Kode ini berfungsi untuk saya:

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