ReactJS'de durum dizilerinin doğru modifikasyonu

Bir statedizinin sonuna bir öğe eklemek istiyorum , bu doğru şekilde mi?

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

Ben dizi yerinde yerinde değişiklik pushsorun neden olabilir endişe - güvenli mi?

Dizinin bir kopyasını yapmanın ve setStateisraflı görünmenin alternatifi .

Docs tepki diyor ki:

Bunu tedavi edin. Değişmezmiş gibi davranın.

Sizin pushdevleti doğrudan dönüşecek ve tekrar sonradan devlet "sıfırlama" ediyor olsa bile, potansiyel olarak, eğilimli kod hata neden olabilir. F.ex, gibi bazı yaşam döngüsü yöntemlerinin componentDidUpdatetetiklenmemesine yol açabilir .

Sonraki React sürümlerinde önerilen yaklaşım, yarış koşullarını önlemek için durumları değiştirirken bir güncelleyici işlevi kullanmaktır :

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

Bellek "atık", standart olmayan durum değişikliklerini kullanırken karşılaşabileceğiniz hatalarla karşılaştırıldığında bir sorun değildir.

Önceki React sürümleri için alternatif sözdizimi

concatYeni bir dizi döndürdüğü için temiz bir sözdizimi almak için kullanabilirsiniz :

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

ES6'da Spread Operator uygulamasını kullanabilirsiniz :

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

Kullanıyorsanız en kolayı ES6.

initialArray = [1, 2, 3];

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

Yeni dizi [1,2,3,4]

React'taki durumunuzu güncellemek için

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

Dizi yok etme hakkında daha fazla bilgi edinin

En basit yol ES6:

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

React güncellemeleri toplu hale getirebilir ve bu nedenle doğru yaklaşım setState'e güncellemeyi gerçekleştiren bir işlev sağlamaktır.

React güncelleme eklentisi için aşağıdakiler güvenilir bir şekilde çalışır:

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

veya concat () için:

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

Aşağıda, yanlış yaparsanız ne olduğuna örnek olarak https://jsbin.com/mofekakuqi/7/edit?js,output öğesinin ne olduğunu gösterir .

SetTimeout () çağırma doğru bir şekilde üç öğe ekledi çünkü React bir setTimeout geri çağrısında toplu güncellemeler yapmayacak (bkz. Https://groups.google.com/d/msg/reactjs/G6pljvpTGX0/0ihYw2zK9dEJ ).

Buggy onClick yalnızca "Üçüncü" ekleyecek, ancak sabit olan, beklendiği gibi F, S ve T ekleyecektir.

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'un yorumda belirttiği gibi, reaksiyon değişmezliği yardımcılarını kullanabilirsiniz . Bunu süper faydalı buldum.

Dokümanlardan:

Basit itme

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

initialArray hala [1, 2, 3].

Fonksiyonel bileşen kullanıyorsanız lütfen bunu aşağıdaki gibi kullanın.

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

Diziye yeni eleman eklemek push()için cevap olmalı.

Öğeyi kaldır ve dizinin güncelleme durumu için aşağıdaki kod benim için çalışıyor. splice(index, 1)Çalışamayız.

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

Bir dizi durumda değeri itmek ve böyle bir değer ayarlamak ve devlet dizi tanımlamak ve harita fonksiyonu ile değeri itmek çalışıyorum.

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

Bu benim için bir dizi içine bir dizi eklemek için çalıştı

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

İşte başkalarına yardım edebileceğini düşündüğüm 2020 Reactjs Hook örneği. Bir Reactjs tablosuna yeni satırlar eklemek için kullanıyorum. Bir şey üzerinde gelişebilirsem bana bildirin.

İşlevsel durum bileşenine yeni bir öğe ekleme:

Durum verilerini tanımlayın:

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

Bir düğmenin yeni bir öğe eklemek için bir işlevi tetiklemesini sağlayın

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

Bu kod benim için çalışıyor:

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