Реагировать - данные от ребенка к родителю - состояние установки проблем

Question

Я не уверен, правильно ли я отправляю данные из дочернего компонента в родительский компонент. Я могу получить данные в родительском, однако всякий раз, когда я go установить состояние в родительском, я получаю ошибку Maximum update depth exceeded..

Любые идеи, где я иду не так (плохо Реагируйте):

Дочерний компонент

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

selectedRowsDataCallback?: (selectedRows: string[]) => void;

Затем позже в этом дочернем компоненте - при его рендеринге я установил в него некоторое значение selectedRowsDataCallback(someOfMyData);

Родительский компонент

И еще в родительском компоненте - У меня есть:

const [selectedRows, setSelectedRows] = React.useState([]);

Дочерний компонент выглядит примерно так:

<ChildComponent
   selectedRowsDataCallback={SelectedRowsCallback}
/>

И этот обратный вызов:

function SelectedRowsCallback(childData: string[]) {
   React.useEffect(() => {
    setSelectedRows(childData);
   }, [])
}

Это в в этот момент получаем Maximum update depth exceeded. (Конечно, делая там файл console.log, я вижу данные).

Поэтому я добавил useEffect с [] deps, но, конечно, он вызывается только один раз. Как заставить его вызываться каждый раз, когда дочерние обновления обновляются?

Во всяком случае, у меня также есть кнопка на родительском элементе, при нажатии которой я хочу получить эти selectedRows, поэтому я использовал состояние для его сохранения.

function someButtonAction() {
   // Get from props and do something 
   console.log(selectedRows);
}

Любые идеи / помощь приветствуется.

Спасибо.

Answer 1

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

1. вы визуализируете своего Родителя, у которого selectedRows находится в его состоянии
2. , вы передаете установщик этого состояния Дочернему
3. дочерний элемент вызывает этот установщик при его рендеринге
4. это вызывает повторный рендеринг родителя, потому что состояние меняется
5. родительский рендеринг запускает дочерний рендеринг
6. часть 3 повторяется
7. часть 4 повторяется
8. часть 5 повторяется
9. часть 3 повторяется
10. ...

Внутри SelectedRowsCallback Вы должны проверить значение selectedRows, если оно изменилось, перед вызовом setSelectedRows. Это должно решить эту проблему.

Однако обратите внимание, что вся функция немного ненужна, поскольку вы создаете новый эффект каждый раз, когда выполняется только setSelectedRows, что уже все, что вам нужно (+ вы должны передать все внешние переменные в эту секунду аргумент useEffect)

Кроме того, это действительно плохая практика - вызывать что-либо, что может вызвать изменение состояния внутри рендера, перемещать selectedRowsDataCallback в другое место - например, componentDidUpdate.