배열로 된 React State 업데이트 하기

React에서 setState로 state 값을 변경하는 것이 동기 방식이 아니라는 것을 계속 까먹는다. ㅠㅠ

기존의 state 값을 가져다가 업데이트 할 때에도 제대로 처리하지 않으면 타이밍 이슈가 있는데, 배열로 된 state이라면 좀더 복잡할 수 밖에 없다.

import React, { Component } from 'react';
 
class App extends Component {
  constructor(props) {
    super(props);
 
    this.state = {
      list: [42, 33, 68],
    };
  }
 
  onUpdateItem = i => {
    this.setState(state => {
      const list = state.list.map((item, j) => {
        if (j === i) {
          return item + 1;
        } else {
          return item;
        }
      });
 
      return {
        list,
      };
    });
  };
 
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => (
            <li key={item}>
              The person is {item} years old.
              <button
                type="button"
                onClick={() => this.onUpdateItem(index)}
              >
                Make me one year older
              </button>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}
 
export default App;

https://www.robinwieruch.de/react-state-array-add-update-remove

How to manage React State with Arrays - RWieruch

 

https://itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60

React setState usage and gotchas