React Hooks - настройка объекта, не выполняющего повторную визуализацию данных компонента. - PullRequest
Новая
       108

React Hooks - настройка объекта, не выполняющего повторную визуализацию данных компонента.

1 голос
/ 19 июня 2020

Я использую React useState для объявления своего объекта: 

    const [results, setResults] = useState();
  console.log(results);

В том же файле я возвращаю компонент React и передаю ему некоторые реквизиты: 

 <Table
          data={results ? results.Companies : []}
          setData={(newArr) => {
            let newResults = results;
            newResults.Companies = newArr.slice(0);
            console.log(newResults);
            return setResults(newResults);
          }}
        />

PS: Keep имея в виду, что я передаю данные только результаты. Компании , который является массивом .

В этом компоненте Таблица Я меняю свойство results.Companies : 

props.setData(arr);

Итак, когда он запускает функцию в компоненте * Таблица : 

setData={(newArr) => {
                let newResults = results; // I am assigning to newResults current result state
                newResults.Companies = newArr.slice(0); // I am replacing newResults.Companies with new array I want to pass
                console.log(newResults); // HERE is the desired results output
                return setResults(newResults);
              }}

* Переменная 1027 * newResults - это именно тот результат, который я хочу передать в setResutlts. Но этот параметр не запускает повторный рендеринг, и, например, этот console.log (results) не вызывается. Почему он не запускается после того, как я передаю новое значение в setResults ()

1 Ответ

3 голосов
/ 19 июня 2020

Поскольку setData - это обратный вызов, используемый Table.

У вас есть закрытия на results и вы изменяете состояние, которое составляет антипаттерн .

Никогда не изменяйте this.state напрямую, поскольку последующий вызов setState () может заменить произведенную вами мутацию. Относитесь к this.state как к неизменяемому.

Из-за закрытий вы продолжаете вызывать setData с последним значением results при его инициализации и изменяя состояние, которое вы фактически не обновляете укажите, как работает setState.

После понимания того, что такое замыкания, вам следует провести рефакторинг кода, чтобы использовать функциональные обновления : 

const setData = (newArr) => {
  setResults((prev) => {
    let newResults = {...prev, Companies: newArr.slice(0)};
    return newResults;
  });
}
<Table setData={setData}/>
...