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添加到依赖项数组中，使其意识到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>;
};