Блог

Главная - Вопросы по программированию - Почему он продолжает говорить мне, что есть ошибка цикла?

Почему он продолжает говорить мне, что есть ошибка цикла?

#reactjs

Вопрос:

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

я делаю клон строки поиска Google и создаю контекстный API ReactJS и добрался до этого места, где остановился и не могу идти дальше, я не знал, как это исправить. Я не вижу бесконечного цикла в своем коде, кто-нибудь может помочь?

 function Search({hideButtons = false}) {
const [{}, dispatch] = useStateValue();

const [input, setInput] = useState('');
const history = useHistory();


const search = e => {
    e.preventDefault();
    history.push('/search');
};

dispatch({
    type: actionTypes.SET_SEARCH_TERM,    //<<<<<<<< Here where is tell me got the error
    term: input
});


return (
    <form className='search'>
        <div className='search__input'>
            <SearchIcon className='search__inputIcon' />
            <input value={input} onChange={e => setInput(e.target.value)} />
            <MicIcon />
        </div>

        {!hideButtons ? (
            <div className='search__buttons'>
                <Button type='submit' onClick={search} variant='outlined'>Google Search</Button>
                <Button variant='outlined'>I'm Feeling Lucky</Button>
            </div>
        ) : (
            <div className='search__buttons'>
                <Button className='search__hideButtons' type='submit' onClick={search} variant='outlined'>Google Search</Button>
                <Button className='search__hideButtons' variant='outlined'>I'm Feeling Lucky</Button>
            </div>
        )}

    </form>
)

Комментарии:

1. это другой компонент : const reducer = (state, action) => { switch (action.type){ case actionTypes.SET_SEARCH_TERM: return{ ...state, term: action.term }; default: return state; } };

2. Пожалуйста, используйте опцию редактирования , чтобы добавить код ^выше к вашему вопросу

Ответ №1:

Я думаю dispatch , что проблема здесь в том, что его следует вызывать только тогда, когда входное значение изменилось с помощью useEffect крючка. Поскольку он находится внутри компонента, он продолжает вызываться каждый раз, когда компонент повторно визуализируется.

 useEffect(() => {
    dispatch({
       type: actionTypes.SET_SEARCH_TERM, 
       term: input
    });
}, [input]);
Метки: ,