setState CSV 文件一旦返回 null

Question

我需要使用 d3 从 csv 文件中读取并将结果存储在状态变量中。我在 useEffect Hook 中分离了初始化，但是当我尝试在返回 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 return null, why?
        ......

我究竟做错了什么？

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]);