ReactJS：useEffect 更新 aws IVS 渠道的每个请求的元数据

如何解决ReactJS：useEffect 更新 aws IVS 渠道的每个请求的元数据

我想按照以下链接执行持续过程，以更新 aws IVS 流的元数据。

我使用 useEffect 钩子进行了管理，但它没有更新值并抛出未定义的错误。

https://codepen.io/amazon-ivs/pen/XWmjEKN?editors=0011

function AppComponent(props) {

  const [MetaData,setMetaData] = useState(null)

  useEffect(() => {
    const data = props.Metadata
    const initData = async () => {
      setMetaData(data)
    }
    initData()
  },[MetaData])

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

解决方法

好的，我对这个代码片段有点困惑。如果您假设您在 props 元数据中收到，那么您可能根本不需要状态，您的代码应该如下所示

function AppComponent(props) {

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

就您的整体代码而言，您已经创建了初始值为 null 的元数据，因此 metaData.question 将在初始运行时抛出错误。异步运行 setMetaData 没有意义。您还订阅了钩子中的元数据更改，但只有更新它的地方才是钩子，它也会导致无限循环。如果您能提供有关您的问题的更多信息并使这个问题不那么广泛，那就更好了

如果你只使用你传递的对象的一些属性，那么你可能不需要将整个对象作为道具传递，但最好传递你使用的道具，因为对象上的任何变化，你正在传递将导致组件的重新渲染。您也可以尝试使用 React.memo 来避免不必要的重新渲染周期。