reactjs - React/Redux - 获取变量以在全局状态更改时正确更新

Question

我目前有一个组件 (A)，它有许多局部状态变量，并且还使用 useSelector((state) => state.app.<var> .一些局部状态变量依赖于该全局状态，我需要将一个局部变量渲染到屏幕上。

代码示例:

const ComponentA = () => {
  const globalState = useSelector((state) => state.app.globalState);

  // CASE 1: WORKS
  const localState1 = 'hello' + globalState + 'world';

  // CASE 2: DOESN't WORK
  const [localState1, setLocalState1] = useState(null);
  const [lcoalState2, setLocalState2] = useState(null);


  useEffect(() => {
    
  }, [localState1]);

  useEffect(() => {
    setLocalState1('hello' + globalState + 'world')
  }, [localState2]);

  return (
    .... code changes 
    <p>{localState1}</p>
  );
}

情况 1 导致 localState1 正确更新并呈现在屏幕上，但在情况 2 中 localState1 未在屏幕上更新。

我不知道为什么要设置 localState1到一个常规变量而不是一个本地状态变量的工作。我认为本地状态的变化会导致在 DOM 上重新渲染，这意味着我可以直观地看到变化。有人可以解释为什么本地状态案例无法更新以及如何解决吗？

Answer 1

您需要通过将 useEffect 添加到 dependencies 数组来让您的 useEffect 知道 globalState 更改(无论如何，当您忘记它时，您应该会收到一个 linting 警告，就像您的情况一样):

const ComponentA = () => {
  const globalState = useSelector((state) => state.app.globalState);

  const [localState1, setLocalState1] = useState(null);

  useEffect(() => {
    setLocalState1("hello" + globalState + "world");
  }, [globalState]);

  return <p>{localState1}</p>;
};

此外，你真的不需要它的状态，只需根据你的需要实现选择器，它总是会在 state.app.globalState 变化时更新:

const ComponentA = () => {
  const globalStateString = useSelector(
    (state) => `hello ${state.app.globalState} world`
  );

  return <p>{globalStateString}</p>;
};