Redux 状态对象值的更改不重新渲染

Question

我的商店中有一个对象，可以在调度操作时对其进行更新。但是我没有在页面上看到 totalDevices 的更新值。它与原始渲染保持一致。我做错了什么？

州

{
  deviceCount: {
    'projectId:ed4b4e40-d4e2-4540-8359-c002526f2793': {
      totalDevices: 1,
      error: {}
    },
    'projectId:a6293167-ade2-4e22-98f0-70260fcee7f7': {
      totalDevices: 0,
      error: {}
    }
  }
}

组件

  const selectDeviceCount = useSelector((state) => state.deviceCount);
  const [currDeviceCount, setCurrDeviceCount] = useState(selectDeviceCount); // Using to display value of totalDevices for each item in object

  useEffect(() => {
    loadDeviceCountByProjectID({ projectId });
  }, [loadDeviceCountByProjectID]);

  useEffect(() => {  // Should this hook trigger a rerender on currDeviceCount? 
    setCurrDeviceCount(
      selectDeviceCount
    );
  }, [selectDeviceCount]);

  return (
    <ListItem
      className={variation === 'block' ? classes.listItem : ''}
      key={projectId}
      button
      component={Link}
      to={`/${organizationName}/${name}?per_page=10&page=1`}
    >
      <ListItemText>
            {name}
          </span>
        }
      />
      <ListItemAvatar className={classes.devicesAvatar}>
        <>
          <TabletAndroidIcon className={classes.deviceIcon} />
          <Typography variant="caption">
            // Conditional rendering to prevent errors when state is undefined on first load
            {selectDeviceCount.length > 0
              ? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
              : 0}
          </Typography>
        </>
      </ListItemAvatar>
    </ListItem>
  );

Answer 1

你的hooks使用没问题，你的state应该在变化。但是您在渲染中测量 selectDeviceCount.length，但 selectDeviceCount 是一个对象，因此长度为 0。如果您想测量 selectDeviceCount 对象内的键数，做 Object.keys(selectDeviceCount).length

为了缓解 selectDeviceCount 成为 undefined，只需通过执行 useState({})

将状态初始化为空对象

以下是您的代码存在问题的区域。

<Typography variant="caption">
            // Conditional rendering to prevent errors when state is undefined on first load
            {Object.keys(selectDeviceCount).length > 0
              ? selectDeviceCount[`projectId:${projectId}`]?.totalDevices
              : 0}
          </Typography>

Redux 状态对象值的更改不重新渲染

Change in Redux state object value not re-rendering

javascript

reactjs

redux