React/Redux 如何将值从 redux 存储设置到组件的 state

Question

我需要将收到的数据从 redux 存储更改为另一个变量（然后修改它）。 目前，我在 API 调用后从 store 接收数据，它存储为officeData offices 。 有谁可以解决这个问题？
这是我的代码：

  const dispatch = useDispatch();
  const offices = useSelector((state) => state.office.offices)
  const [officeData, setOffices] = useState(offices);
  debugger;
  useEffect(()=> {
    dispatch(getOffices());
    setOffices(offices);
    debugger
  }, [dispatch])

Answer 1

如果您甚至没有输入您的 useEffect 我认为这是因为您将dispatch作为依赖项提供。

组件挂载时触发效果，组件更新（prop 或 state）时也会触发效果。 所以你可以做这样的事情：

import { useEffect } from "react";

const dispatch = useDispatch();
const offices = useSelector((state) => state.office.offices);
const [officeData, setOffices] = useState(undefined);
const [didMount, setDidmount] = useState(false);

// When component mount, load your Offices data
useEffect(() => {
  if(!didMount){
    dispatch(getOffices());
    setOffices(offices);
  } else {
    setDidmount(true);
  }
});

useEffect(() => {
  if(didMount) {
    // When you update officeData, do your thing
  }
}, [officeData]);

我不知道 useSelector 的行为，但我猜它不会触发渲染。 也许你可以有一个 useEffect 与 office 作为依赖，只是要小心不要循环！