避免警告的方法：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, hooks, selectors...react DSL 层数越来越多，很难在框架中深入调试。

更新。我认为这可能是因为我一个接一个地调用两个 saga，这会导致 UI 中出现某种竞争条件？

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

Answer 1

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