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

我目前有一个组件（a），它有许多局部状态变量，并且还使用

useSelector（（state）=>state.app.

。一些局部状态变量依赖于该全局状态，我需要在屏幕上呈现一个局部变量

代码示例：

const ComponentA=（）=>{
const globalState=useSelector（（state）=>state.app.globalState）；
//案例1：工程
const localState1='hello'+globalState+'world'；
//案例2：不起作用
const[localState1，setLocalState1]=useState（null）；
const[lcoalState2，setLocalState2]=useState（null）；
useffect（（）=>{
}，[localState1]）；
useffect（（）=>{
setLocalState1（'hello'+globalState+'world'）
}，[localState2]）；
返回(
…代码更改
{localState1}

);
}

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

---

我不知道为什么将

localState1

设置为常规变量而不是局部状态变量会起作用。我认为局部状态的更改会导致在DOM上重新呈现，这意味着我可以直观地看到更改。有人能解释为什么局部状态案例无法更新以及如何修复它吗？

您需要创建

>useEffect

通过将其添加到dependencies数组中来了解

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

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

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