React 18 Rendering Before setState 导致错误

Question

所以我一直在尝试制作超级简单的 api 请求，如下所示，并将其存储到 useState var 中，但是在最近更新到 React 18 之后，我在呈现任何内容之前收到错误，因为str returns 未定义。 return 来自 api 的数据不是失败，而是 str returning 未定义，因为它没有等待设置数据状态。

我不知道该怎么办，因为在以前的 React 版本中，我没有遇到过这个问题。有没有人知道可能是什么问题？我查看了文档，但似乎没有提到这是需要注意的事情。

const Component = () => {

      const [data, setData] = useState(null);
      const str = data.data.sentence

          useEffect(() => {
            fetch("https://api.hatchways.io/assessment/sentences/2")
              .then((res) => res.json())
              .then((data) => setData(data));
          }, []);
       
       return (
         <div> 
            <p>{str}</p>
         </div> 
    )
}

Answer 1

因为 data.data.sentence 未定义，当您将其声明为 str 时，整个组件将抛出错误。所以你需要设置它，因为它可能为空。

const str = data?.data.sentence

旧版本的 React 一直都是这种情况，所以您可能在做其他事情。

我个人会在那里有一个加载状态，这样你就不会在没有值的情况下呈现 str。

const Component = () => {

      const [data, setData] = useState(null);
      const str = data.data.sentence

          useEffect(() => {
            fetch("https://api.hatchways.io/assessment/sentences/2")
              .then((res) => res.json())
              .then((data) => setData(data));
          }, []);

       if(!str){
          return 'loading'
       }
       
       return (
         <div> 
            <p>{str}</p>
         </div> 
    )
}

React 18 Rendering Before setState 导致错误

React 18 Rendering Before setState causing error

fetch

reactjs