为什么在 React 组件中用 d3 读取 CSV 文件后状态变量 `zone` 返回 null？

Question

我正在开发一个 React 组件，我需要使用 d3 从 CSV 文件读取数据并将结果存储在状态变量中。我已将初始化分离在

useEffect

挂钩中，但是当我在读取 CSV 文件后尝试使用

zone

状态变量时，它会返回

null

。

相关代码如下：

const ItalyMapRegion = ({ w, h, onChangeRegion }) => {
  const [zone, setZone] = useState(null);

  useEffect(() => {
    console.log("once");
    d3.csv(data).then(function (data) {
      setZone(data);
    });
  }, []);

  useEffect(() => {
    console.log(zone); // This returns null, why?
    // ...
  }, [zone]);

  // ...
};

我在这里做错了什么，为什么读取 CSV 文件后

zone

状态变量为空？

Answer 1

因为第一个

useEffect

发生的操作是异步的。尝试将

zone

变量添加为第二个

useEffect

的依赖项并检查它是否存在：

const ItalyMapRegion = ({ w, h, onChangeRegion }) => {

  const [zone, setZone] = useState(null);

  useEffect(() => {
    console.log("once");
    d3.csv(data).then(function (data) {
      setZone(data);
    });
  }, []);

  useEffect(() => {
    if (zone) {
      console.log(zone);
    }
  }, [zone]);