使用 React Hook 傳遞道具時，React Hook useEffect 缺少依賴項

Question

所以我嘗試使用 Effect 從 redux 傳遞組件，這是我的代碼：

const initState = {
    newAttribs: { ...props.state.Auth },
  };

  const [userList, setUserList] = useState(initState);

  useEffect(() => {
    setUserList({ ...userList, newAttribs: { ...props.state.Auth } });
  }, [props.state.Auth]);

  console.log("userList now", userList);

但它一直在控制台中發出這樣的警告：

WARNING in [eslint]
src\pages\Login.jsx
  Line 15:6:  React Hook useEffect has a missing dependency: 'userList'. Either include it or remove the dependency array. You can also do a functional update 'setUserList(u => ...)' if you only need 'userList' in the 'setUserList' call  react-hooks/exhaustive-deps

有人可以向我解釋我在這里做錯了什么....

Answer 1

您的效果掛鈎取決於userList但它不包含在依賴項數組中。 一種有用的替代方法是使用 state 設置器的回調 function 形式：

setUserList(userList => (
  { ...userList, newAttribs: { ...props.state.Auth }) }
);