使用 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.png

characterInfo.models在访问name.

  return (

    <div>

      {

        characterInfo.models &&

        characterInfo.models.length &&

        characterInfo.models[0].name

      }

    </div>

  )

或者，如果您使用可选链接：

  return (

    <div>

      {characterInfo?.models[0]?.name}

    </div>

  )

另一个注意事项 - 您将 的初始值设置characterInfo为一个空数组。如果将它设为一个空对象，就会更清楚地表明您希望它data是一个对象，而不是数组。

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

Answer 2

您可以将返回语句调整为仅在名称存在时呈现名称

return (

    <div>

      {characterInfo.length && characterInfo.models[0].name}

    </div>

  )