Блог

У меня есть небольшой компонент React, который просто использует редактор расширенного текста(TinyMCE) для редактирования значений в текстовом поле, отображаемом в веб-приложении.

Я обнаружил, что если я печатаю слишком быстро или слишком много, я получаю эту ошибку:

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

Но я не использую ни componentWillUpdate то, ни другое componentDidUpdate

Поэтому я не уверен, почему React говорит мне это.

Я пытался починить, но ничего из того, что я делаю, не помогает.

Я был бы признателен за любую информацию! 🙂

Вот мой компонент реакции:

 import React, { useState, useEffect } from 'react';
import { Editor } from '@tinymce/tinymce-react';
import axios from 'axios';

const App = (props) => {
    const [engineText, setEngineTextState] = useState(props.engineText || "Describe your engine...");
    const [engineId, setEngineIdState] = useState(props.engineId);
    var edValue = '';

    // first check local storage to see if they already have typed something...use engineId as the unique key
    if (localStorage.getItem(engineId)) {
        edValue = localStorage.getItem(engineId);
    } else {
        edValue = engineText;
    }

    const [engineState, setEngineState] = useState(edValue);

    // set the local storage in case user navigates away and then comes back we don't lose what they wrote
    useEffect(() => {
        localStorage.setItem(engineId, engineState)
    }, [engineState]);

    // update database
    const updateEngineText = (content) => {
        const request = axios.put(`/api/EngineManagementConsole/${engineId}/engineText`, JSON.stringify(content), {
            headers: {
                'Content-Type': 'application/json'
            }
        });
        setEngineState(content);
    }
    return (
        <Editor
            initialValue={edValue}
            init={{
                height: 500,
                menubar: 'file edit view insert format tools table help',
                plugins: [
                    'searchreplace visualblocks code fullscreen',
                ]
            }}
            value={engineState}
            onEditorChange={updateEngineText}
        />
    )
}

export default App;
 

Ваш компонент будет проверять localStorage и устанавливать значение edValue для каждого отдельного рендеринга. Это передается в качестве initialValue реквизита Editor , поэтому это приведет Editor к повторному отображению компонента.

Поскольку это всего лишь начальное значение, вы, вероятно, хотели оценить его только один раз. Мы можем использовать useMemo это для этого.

Ваш edValue является производным от обоих engineId , и engineText поэтому они должны быть зависимостями useMemo . Он будет повторно оценен, если какая-либо из этих переменных изменится.

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

 const App = ({engineId, engineText = "Describe your engine..."}) => {

    const edValue = useMemo( () => {
         // function to create the value
         return localStorage.getItem(engineId) || engineText;
         // dependencies array
         }, [engineId, engineText]
    );

    const [engineState, setEngineState] = useState(edValue);
...
 

Примечание: Я не уверен, что это единственная проблема, могут быть и другие проблемы, вызывающие ошибку.