javascript - React 钩子(Hook)错误 : Rendered more hooks than during the previous render

Question

我曾经有一个函数组件充当页面:

export default function NormalList(props) {
    const pageSize = 20;
    const [page, setPage] = useState(1)
    const [searchString, setSearchString] = useState(null);
    const [creditNotes, setCreditNotes] = useState(() => getCreditNoteList());
    const [ordering, setOrdering] = useState(null);

    useEffect(() => getCreditNoteList(), [page, searchString, ordering]);

    function getCreditNoteList() {
        API.fetchCreditNoteList({
            account_id: props.customerId, page, page_size: pageSize, searchString, ordering
        }).then(data => {
            setCreditNotes(data);
        });
    }
    return (<>{creditNotes.results.map(record => <...>}</>)
}

这一直运行良好，但最近我需要用 ListPage 组件包装 NormalList :

export default function ListPage(props) {
    const customerId = props.match.params.customer_id;
    return (<div>...<div><NormalList/></div></div>)
}

然后突然我收到此错误渲染的钩子(Hook)比之前的渲染期间更多。

在我看来，getCreditNoteList 内的 setCreditNotes(data) 导致了错误，但我不知道为什么。

Answer 1

因此，您需要解决一些问题。首先，您应该从 useState 函数中删除函数调用，您应该只在 useEffect Hook 内执行副作用，请参阅 React Docs 。

接下来的事情是，每当您决定将依赖项数组用于 useEffect Hook 时，您应该包含 useEffect 的所有依赖项，即所有 props、状态，包括您在 useEffect Hook 内使用的函数组件内的函数。所以经验法则是永远不要对你的依赖撒谎!否则你会搬起石头砸自己的脚。

因此，最简单的选择是将 getCreditNoteList 函数移至 useEffect Hook 内，并将 useEffect Hook 的所有依赖项添加到依赖项数组中。

export default function NormalList({ customerId }) {
    const pageSize = 20;
    const [page, setPage] = useState(1)
    const [searchString, setSearchString] = useState(null);
    const [creditNotes, setCreditNotes] = useState({});
    const [ordering, setOrdering] = useState(null);

    useEffect(() => {

      function getCreditNoteList() {
        API.fetchCreditNoteList({
            account_id: customerId, 
            page, 
            page_size: pageSize, 
            searchString, 
            ordering
        }).then(data => {
            setCreditNotes(data);
        });
      }

      getCreditNoteList(),

       // add ALL! dependencies
    }, [page, searchString, ordering, pageSize, customerId]))

    return (
       <> </>
    )
}

第二个选项如果您想在其他地方使用 getCreditNoteList 函数，并希望将其保留在 useEffect Hook 之外，您可以通过将 getCreditNoteList 逻辑包装在 useCallback Hook 内来实现，如下所示，然后添加由于我之前提到的原因，将函数添加到 useEffect Hook 内的依赖项数组中。

export default function NormalList({ customerId }) {
    const pageSize = 20;
    const [page, setPage] = useState(1)
    const [searchString, setSearchString] = useState(null);
    const [creditNotes, setCreditNotes] = useState({});
    const [ordering, setOrdering] = useState(null);

    const getCreditNoteList = useCallback(() => {
        API.fetchCreditNoteList({
            account_id: customerId, 
            page, 
            page_size: pageSize, 
            searchString, 
            ordering
        }).then(data => {
            setCreditNotes(data);
        });
     // the function only changes when any of these dependencies change
    },[page, searchString, ordering, pageSize, customerId])

    useEffect(() => {

      getCreditNoteList(),

    },[getCreditNoteList])

    return (
       <> </>
    )
}