reactjs - 使用 useState 挂钩更新功能后 React 不会更新状态

Question

无法使用从 useState 挂钩返回的函数设置状态。

包装更多函数并在每个可能的点记录它，它成功地异步获取新数据，一直到 setData 调用，我找不到在内部达到峰值的方法。我还在渲染之前检查了数据是否在状态变化，但在网页中没有变化，但在调用 setData 后数据对象的值没有变化。

function PollResults(props) {
  const classes = useStyles2();
  const [data, setData] = useState([]);

  const changeData = data => {
    console.log(data);
    setData(data);
  };

  useEffect(() => {
    subscribeToResults(props.id, data => {
      //console.log(data);
      changeData(data);
    });
    return () => {
      unsubscribeToResults(props.id);
    };
  }, [props.id, setData]);
  //console.log(data);
  return <VictoryPie animate colorScale="qualitative" data={data} />;
}

Answer 1

你需要对你的代码做一个简单的改变：

function PollResults(props) {
  const classes = useStyles2();
  const [data, setData] = useState([]);

  const changeData = data => {
    console.log(data);
    setData([data]); // using [] around value.
  };

  useEffect(() => {
    subscribeToResults(props.id, data => {
      //console.log(data);
      changeData(data);
    });
    return () => {
      unsubscribeToResults(props.id);
    };
  }, [props.id, setData]);
  //console.log(data);
  return <VictoryPie animate colorScale="qualitative" data={data} />;
}

也许您需要使用钩子 useCallback 检查您的 ChangeData 方法以避免无限重新渲染（如果发生这种情况）。