Способы избежать Предупреждение: React обнаружил изменение в порядке зацепок - PullRequest
Новая
       3

Способы избежать Предупреждение: React обнаружил изменение в порядке зацепок

0 голосов
/ 24 марта 2020

У меня есть компонент, который отправляет некоторые действия при изменении состояния где-либо еще в приложении. Но это как-то дает мне страшную ошибку change in the order of Hooks.

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

Однако я отображаю списки элементов, и значения этих списков изменяются, поскольку сервер загружает данные. Использование селекторов и redux-sagas делает все это практически невозможным для отладки, так как еще я могу отследить root проблемы?

У меня есть один компонент: 

const PhraseList = props => {
    const trainingPhrases = useSelector(selectFilteredPhrases());

    return (
        <div className={styles.Wrapper}>
            <ul className={opStyles.listReset}>
                {  
                    trainingPhrases.map((phrase, idx) => {
                        return PhraseItem({ phrase, idx });
                    })
                }
            </ul>
        </div>
    );

который вызывает компонент PhraseItem, который выдает ошибку. 

const PhraseItem = ({ phrase, idx }) => {
    // this line chokes
    const [checked, setChecked] = useState(false);

    return (
        <li key={"tr-" + idx}>
            <div className={styles.container}>
                <div className={styles.phraseText}>{phrase.text}</div>
            </div>
        </li>
    );
};

Я отлаживаю изменения в селекторе (фабрике селектора), и это то, что, кажется, вызывает приложение к sh. 

export const selectFilteredPhrases = () =>
    createSelector(trainingPhrases, phraseFilter, (trainingPhrases, phraseFilter) => {
        console.log('trainingPhrases', trainingPhrases)
        return trainingPhrases
    });

но если данные никогда не менялись, трудно создать приложение: O

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

redux, sagas, hooks, селекторы ... реакция DSL - это все больше и больше слоев, и в глубине фреймворка трудно отлаживать.

UPDATE. Я думаю, что может быть потому, что я вызываю две саги одна за другой, и это вызывает какое-то состояние гонки в интерфейсе? 

    const pickIntent = () => {
        dispatch(pickIntentAction(intentId));
        dispatch(getIntentPhrasesAction(intentId));

debuglog

1 Ответ

0 голосов
/ 24 марта 2020

Я думаю, что этот ответ связан, как уже упоминалось в этой ссылке, если вы вызываете компонент jsx, как функция реагирует, думает, что хуки, которые объявлены в этой функции jsx, являются частью компонент приложения, поэтому, если ваш массив trainingPhrases имеет меньше элементов на первом рендере, чем на втором, это вызовет это предупреждение (будет меньше рендеринга компонентов jsx, что означает, что будет меньше хуков). Решение - это простой вызов компонента jsx, подобного этому <PhraseItem phrase={phrase} idx={idx} />

...