Правильна модифікація державних масивів у ReactJS

Я хочу додати елемент до кінця stateмасиву, це правильний спосіб зробити це?

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

Мене хвилює, що зміна масиву на місці pushможе спричинити неполадки - це безпечно?

Альтернатива - зробити копію масиву та setStateздатись марною.

Документи React кажуть:

Ставтеся до цієї держави, ніби вона непорушна.

Ви pushбудете мутувати стан безпосередньо, і це може призвести до коду, схильного до помилок, навіть якщо ви знову "скинете" стан після цього. F.ex, це може призвести до того, що такі методи життєвого циклу, як, наприклад componentDidUpdate, не спрацьовують.

Рекомендований підхід у пізніших версіях React полягає у використанні функції оновлення при зміні станів для запобігання перегоновим умовам:

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

"Відходи" пам'яті не є проблемою порівняно з помилками, з якими ви можете зіткнутися, використовуючи нестандартні модифікації стану.

Альтернативний синтаксис для попередніх версій React

Ви можете використовувати concatдля отримання чистого синтаксису, оскільки він повертає новий масив:

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

В ES6 ви можете скористатися оператором Spread :

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

React може створювати пакетні оновлення, і тому правильним підходом є надання setState функції, яка виконує оновлення.

Для додатка оновлення 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 ).

Помилка 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]

початковийArray як і раніше [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);

Я намагаюся натиснути значення в стані масиву і встановити таке значення, як це, і визначити масив стану і значення push за функцією карти.

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