Question

我正在尝试通过服务器端 API 响应进行映射，以将状态中的前三个项目存储为具有标题和 url 键/值对的对象数组。运行此代码时，出现“对象作为 React 子对象无效”错误。我如何正确地将对象推送到我的文章 useState 数组，以便我可以映射该数组以将它们呈现为我的页面上的链接？谢谢...

const CodeNews = () => {

    const [articles, setArticles] = useState([])

    useEffect(() => {
        axios.get('http://localhost:8000/apiKey')
        .then((res)=>{
            console.log(res)
            let tempArr = [];
            for(let i=0;i < 3; i++){
                tempArr.push({
                    title: res.data.articles[i].title,
                    url: res.data.articles[i].url
                })
            }
            setArticles(tempArr);
        })
        .catch((err)=>console.log(err))
    },[])

Answer 1

可能的解决方案是将渲染方法更改为如下所示：

articles.map((el) => (
  <a href={el.url}>{el.title}</a>
))

这是因为您无法在 JSX 中渲染整个对象。

如何映射 API 响应并将其存储为状态 React JS 中的对象数组

1 个答案: