ReactJS中使用useEffect Hook更新AWS IVS频道元数据时遇未更新及Undefined错误问题

我来帮你梳理下代码里的问题，这几个点是导致元数据不更新还报错的关键：

1. useEffect依赖项完全错配了 #

你现在把metaData作为useEffect的依赖，但你真正需要监听的是父组件传进来的props.metadata呀！当前的逻辑是：每次metaData变化（也就是你调用setMetaData之后），useEffect就会触发，然后又调用setMetaData，这不仅会造成无意义的重复渲染，更重要的是——当外部的props.metadata更新时，你的useEffect根本不会响应，自然元数据就没法同步更新了。

2. 空值访问直接触发报错 #

你初始化metaData为null，组件第一次渲染的时候直接去读metaData.question，null上根本没有question这个属性，Undefined错误就是这么来的，必须先做空值判断。

3. 没必要用async函数 #

setMetaData是同步操作，你把它包在async函数里完全是多此一举，直接调用就行。

给你修正后的代码：

function AppComponent(props) { 
  const [metaData, setMetaData] = useState(null) 

  useEffect(() => { 
    // 监听props.metadata的变化，同步到本地状态
    setMetaData(props.metadata)
  }, [props.metadata]) // 这里改成依赖props.metadata，外部更新时自动触发

  // 先判断元数据是否存在，避免空值报错
  if (!metaData) {
    return <div>加载元数据中...</div>
  }

  return ( 
    <div> 
      <h2>{metaData.question}</h2> 
    </div> 
  ) 
}

另外多说一句：如果这个元数据只是用来展示，不需要在组件内部修改的话，其实你完全可以省去本地状态，直接用props.metadata，代码会更简洁：

function AppComponent(props) { 
  const { metadata } = props;

  if (!metadata) {
    return <div>加载元数据中...</div>
  }

  return ( 
    <div> 
      <h2>{metadata.question}</h2> 
    </div> 
  ) 
}

内容的提问来源于stack exchange，提问作者TMA