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方法，以避免无限重渲染（如果发生这种情况）。

使用useState挂钩更新函数后，React将不会更新状态

1 个答案: