避免警告的方式：React已检测到Hooks顺序的变化

Question

我有一个组件，当应用程序中其他位置的状态发生变化时，该组件会调度一些操作。但这以某种方式给了我可怕的change in the order of Hooks错误。

[在阅读rules of hooks时说，基本上将钩子包装在条件句中是僵尸的……我目前不这样做。

但是，当服务器加载数据时，我正在渲染项目列表，并且这些列表的值会更改。使用选择器和redux-sagas使得所有这些几乎不可能实际调试，因此我还能如何追踪问题的根源？

我有一个组成部分：

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>
    );
};

我正在调试选择器（选择器工厂）中的更改，这似乎触发了应用程序崩溃。

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

但是如果数据从未更改过，很难构建一个应用程序：O

我看到了an answer about using JSX，我认为这并不重要。在这个问题上别无其他。

redux，sagas，hook，选择器... react DSL越来越多，很难在框架的深层进行调试。

更新。我认为这[[might是因为我一个接一个地调用了两个sagas，这在UI中导致了某种竞争状况？

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

Answer 1

我认为此answer是相关的，正如在此链接中已经提到的那样，如果您将jsx组件作为函数调用，则react认为，在此jsx函数中声明的钩子是app组件的一部分，因此如果您的数组trainingPhrases在第一个渲染上的元素少于在第二个渲染上的元素，这将导致此警告（渲染的jsx组件将减少，这意味着钩子将更少）。解决方案是像这样<PhraseItem phrase={phrase} idx={idx} />的简单调用jsx组件