当存储在反应状态中时，数组变成对象

Question

我正在从我的 api 获取一些数据。在获取数据的回调中，数据是一个数组：const classes = useStyles();const [posts, setPosts] = useState([]);useEffect(() => {    fetch('https://forum-temp.herokuapp.com/api/posts')        .then((res) => res.json())        .then((res) => {            console.log(typeof res.data.docs) // Array            setPosts(res.data.docs);        });}, []); 在我的功能组件的 return 语句内 -<div className="post__container">                    { {posts.map((post, i) => (                        <MiniPost                            dp="https://picsum.photos/200"                            username="blah"                            time="blah"                            heading="blah"                            comments="4"                            history={history}                            key={i}                        />                    ))} }    </div>

Answer 1

因为你是双层包装的。React 仅使用单一包装。仅使用一组{}这样的{posts.map( ... )}：

<div className="post__container">

  {posts.map((post, i) => (

    <MiniPost

      dp="https://picsum.photos/200"

      username="blah"

      time="blah"

      heading="blah"

      comments="4"

      history={history}

      key={i}

    />

  ))}

</div>