Как в react заменить один массив другим в стейте?

Question

Есть такой компонент:

const Example = (props) => {
        const [value, setValue] = useState([]);

        let stateCopy = Object.assign({}, value);
        stateCopy = [
            {id:1},
            {id:2},
    ...//много элементов...
        ];

        const refreshState = () => {
            setValue(stateCopy);
        }

        refreshState();

        return (
            <div></div>
        );
    }

    export default Example;

В качестве стэйта я первоначально задаю пустой массив, копирую его в переменную, после этого ее как-то видоизменяю и пытаюсь заменить массив из стэйта переменной stateCopy. React выдает такую ошибку: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

Вообще массив в качестве стэйта мне нужен по следующей причине: по нажатию кнопки в этом массиве будет меняться большое количество элементов и компонент должен ре-рендериться каждый раз когда происходит изменение объектов в массиве. Сейчас как я понимаю ре-рендер происходит каждый раз, когда меняется любой элемент массива, но мне нужно чтобы ре-рендер происходил только когда все элементы поменяются. Что мне использовать в этом случае?

Answer 1

const Example = (props) => {
  const [value, setValue] = useState([]);
  
  const refreshState = (event) => {
    setValue(prevState => {
      return [
        ...prevState,
        {id: 1},
        {id: 2}
      ]
    })
  }


  return (
      <div>
        <button
          onClick={refreshState}
        > Add to Array </button>
      </div>
  );
}

export default Example;

БЛОГ НА HUSL

Как в react заменить один массив другим в стейте?

Ответы (1 шт):