Javascript 使用反应钩，使用；“使用状态”；及；“使用效果”；，有没有一种方法可以让一个状态等待状态有一个值？

我想做什么？

通过前端的React钩子呈现

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>
  )
}

（因此，在本例中，要访问“AC”，应该是

characterInfo.models[0].name

）

我期望结果是什么？

我只希望呈现

AC

实际结果是什么？

我会得到这个错误：

TypeError:无法读取未定义的属性“0”

我认为问题可能是什么？

---

我认为它必须处理异步平衡，尤其是

useffect（）

。我认为前端会在

setCharacterInfo

决定设置任何内容之前尝试渲染。

您可以将return语句调整为仅在存在render name的情况下渲染

return (
    <div>
      {characterInfo.length && characterInfo.models[0].name}
    </div>
  )

返回(
{characterInfo.length&&characterInfo.models[0].name}
)

我认为前端会在setCharacterInfo决定设置任何内容之前尝试渲染

这是正确的，在运行

useffect

中的函数之前，组件会使用默认的

useState

值渲染一次。下面是组件装载、更新和卸载时的执行顺序图（注意

render

发生在

useffect

之前）：

在访问

name

之前，您需要检查

characterInfo.models

是否存在（为了安全起见，请确保它有一个长度）

  return (
    <div>
      {
        characterInfo.models &&
        characterInfo.models.length &&
        characterInfo.models[0].name
      }
    </div>
  )

---

您需要循环查看您的结果。在渲染itAlso时使用类似于“map”的方法，当第一个注释的状态设置为characterInfo时，如果您说的是

{characterInfo.models.map（（model）=>（{model.name}））}

，我将收到的错误是

TypeError:无法读取未定义的属性“map”。

对于第二条注释，是的，我将“数据”作为状态放入

setCharacterInfo

中，然后“数据”应该是我

characterInfo

状态。解决方案对我不起作用，我更深入地查看了通过

console.log（characterInfo.length）

和

console.log（characterInfo.models[0].name）

按钮显示的值，第一个按钮将显示

未定义的

，第二个按钮将显示

“AC”

。谢谢你的努力！我尝试了第一种解决方案，但前端没有呈现任何内容。我为每个值做了一个

console.log

，下面是：

[{…}]，未定义，“AC”

。现在，当我仅仅尝试

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

时，它成功了！我尝试了第二种解决方案，它导致了与

TypeError相同的问题：无法读取未定义的
的属性“0”。我继续写了你的笔记，我认为这对利用它很有帮助。谢谢你的帮助！
  return (
    <div>
      {
        characterInfo.models &&
        characterInfo.models.length &&
        characterInfo.models[0].name
      }
    </div>
  )

  return (
    <div>
      {characterInfo?.models[0]?.name}
    </div>
  )

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