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的更改添加到依赖项数组来使其globalState知道（无论如何，如您的情况，您应该在收到警告时发出警告）：

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

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

1 个答案: