使用 React Hooks，使用“useState”和“useEffect”

Question

我想做什么？

通过 React Hooks渲染characterInfo到前端。

当前尝试执行此操作的代码是什么？

呈现信息的前端组件：

export default function ReactComponent() {

  const [characterInfo, setCharacterInfo] = useState([]);

  useEffect(() => {

    socket.emit("/character/read");

    socket.on("/character/read", function (data) {

      if (data.status === "SUCCESS") {

        setCharacterInfo(data)

      }

    });

    return () => {

      socket.off("/character/read");

    };

  }, []);

  return (

    <div>

      {characterInfo.models[0].name}

    </div>

  )

}

后端.json信息作为“数据”以及保存到的characterInfo内容setCharacterInfo：

{

  status: "SUCCESS"

  models: [

    { 

      name: "AC",

      element: "Air",

    }

    {

      name: "Irene",

      element: "Fire",

    }

  ]

}

（所以在这种情况下访问“AC”，它将是characterInfo.models[0].name）

我期望结果是什么？

我希望只是AC被渲染。

实际结果如何？

我会得到这个错误：

TypeError: Cannot read property '0' of undefined

我认为问题可能是什么？

我认为它必须处理异步平衡，尤其是useEffect(). 我认为前端会在setCharacterInfo决定设置任何内容之前尝试渲染。

Answer 1

我认为前端会在 setCharacterInfo 决定甚至设置任何内容之前尝试渲染。没错，您的组件useState在函数useEffect运行之前使用默认值渲染一次。下面是组件挂载、更新和卸载时的执行顺序图（注意render发生在 之前useEffect）：https://raw.githubusercontent.com/donavon/hook-flow/master/hook-flow.pngcharacterInfo.models在访问name.&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; characterInfo.models &&&nbsp; &nbsp; &nbsp; &nbsp; characterInfo.models.length &&&nbsp; &nbsp; &nbsp; &nbsp; characterInfo.models[0].name&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </div>&nbsp; )或者，如果您使用可选链接：&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {characterInfo?.models[0]?.name}&nbsp; &nbsp; </div>&nbsp; )另一个注意事项 - 您将 的初始值设置characterInfo为一个空数组。如果将它设为一个空对象，就会更清楚地表明您希望它data是一个对象，而不是数组。const [characterInfo, setCharacterInfo] = useState({});

Answer 2

您可以将返回语句调整为仅在名称存在时呈现名称return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {characterInfo.length && characterInfo.models[0].name}&nbsp; &nbsp; </div>&nbsp; )