Блог

Главная - Вопросы по программированию - Как использовать хук useState для установки значения в FormDataConsumer

Как использовать хук useState для установки значения в FormDataConsumer

#reactjs #react-admin #react-final-form #final-form

#reactjs #реагировать-администратор #реакция-окончательная форма #окончательная форма

Вопрос:

Мне нужно установить постоянное значение useState , используя хук FormDataConsumer . Это необходимо, потому что значение const может быть получено только внутри FormDataConsumer . Это постоянное значение будет использоваться в качестве опоры для другого компонента. Проблема, с которой я сталкиваюсь, заключается в сообщении об ошибке ниже. Каков наилучший способ сделать это? Заранее спасибо

Ошибка: превышена максимальная глубина обновления. Это может произойти, когда компонент повторно вызывает setState внутри componentWillUpdate или componentDidUpdate . React ограничивает количество вложенных обновлений, чтобы предотвратить бесконечные циклы.

 //const initialized here
    const [outletsList, setOutletsList] = useState([]);

 
//the place where the const must be set
   

                     <FormDataConsumer>
                      {({ formData, ...rest }) => {
                        //console.log(`formData: ${JSON.stringify(formData)}`)
                        //console.log(`rest: ${JSON.stringify(rest)}`)
        
                        let s = GetOutletsBySalesRep({
                          distributorkey: formData.distributorid,
                          salesrep: formData.salesrep,
                        });
        
                        **setOutletsList(s);**
                      }}
                    </FormDataConsumer>

Ответ №1:

Ошибка, которую вы получаете, связана с тем, как работает сам React — вы обновляете переменную состояния, которая переводит компонент в повторный рендеринг, и при каждом рендеринге вы снова устанавливаете состояние … таким образом, вы попадаете в бесконечный цикл.

Чтобы избежать этого, вы должны либо установить условие, при котором состояние будет обновляться, например

 if(outletsList.length === 0) setOutletsList(s);

Или используйте ссылку для сохранения результата с помощью useRef перехвата, обновляющего его текущее свойство, потому что эта операция не запускает повторный запуск.

 const outletsListRef = useRef();

... 

outletsListRef.current = s;

Хотя не уверен, почему вам нужно сохранить его, а не повторно отображать компонент.

Метки: