ReactJS: useEffect根据aws IVS chaannel的每个请求更新元数据

Question

我想按照以下链接执行连续流程，以更新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>
  )
}

Answer 1

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

function AppComponent(props) {

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

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

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