对象作为 React 子对象无效 [object Promise] [重复]

Question

我是使用 reactjs 的新手。第一种情况我想从 fetch url 获取一个 json 数据，但是那个 json 需要 async await 来显示所有数据。我设法解决了这个问题，但现在我想从 json 附加数据以响应返回渲染。然后我得到这样的错误未捕获的错误：对象作为 React 子项无效（找到：[object Promise]）。如果您打算渲染一组子项，请改用数组。。这是我的代码

  async function URL(url, id){
    return fetch(url+"/"+id)
    .then((response) => response.json())
    .then((responseJson) => {
        const myArrayresponse = responseJson.image.split("/");
        return "https://myurl.com/"+myArrayresponse[2]+"/"+myArrayresponse[3];
    })
    .catch((error) => {
       return "images/icon.png";
    });
  }

const posts = datas[0].map((mydata, i) => URL(mydata.uri, mydata.id).then(img => {
      return `<a href={"https://myurl.com/"+CONFIG.ADDRESS+"?a="+mydata.id} target="_blank" className="mybtn"><div className="title">{mydata.name} ({mydata.symbol} - {mydata.id})</div><img src={img} /></a>`;
      })
    );
    
return (
<ResponsiveWrapper flex={1} style={{ padding: 24 }} test>
   <s.Container flex={1} jc={"center"} ai={"center"}>
       {posts}
   </s.Container>
</ResponsiveWrapper>
)

const post 是 [object Promise]，如何在没有 [object Promise] 的情况下附加 const post 以响应返回渲染？

Answer 1

你得到[object Promise]是因为你实际上返回了一个promise数组。

因此，为了使其正常工作，您可以使用Promise.all，它将一个可迭代的 Promise 作为输入，并返回一个解析为输入 Promise 结果数组的 Promise。参考这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

你可以这样做：

  const [posts,setPosts]= useState([])

  async function URL(url, id){
    return fetch(url+"/"+id)
    .then((response) => response.json())
    .then((responseJson) => {
        const myArrayresponse = responseJson.image.split("/");
        return "https://myurl.com/"+myArrayresponse[2]+"/"+myArrayresponse[3];
    })
    .catch((error) => {
       return "images/icon.png";
    });
  }

  useEffect(()=>{
    async function getPosts(){
      const result = await Promise.all(datas[0].map((mydata, i) => URL(mydata.uri, mydata.id).then(img => {
        return `<a href={"https://myurl.com/"+CONFIG.ADDRESS+"?a="+mydata.id} target="_blank" className="mybtn"><div className="title">{mydata.name} ({mydata.symbol} - {mydata.id})</div><img src={img} /></a>`;
        })
      ));
      setPosts(result)
    };

    getPosts()
  },[])

return (
<ResponsiveWrapper flex={1} style={{ padding: 24 }} test>
   <s.Container flex={1} jc={"center"} ai={"center"}>
       {posts}
   </s.Container>
</ResponsiveWrapper>
)