useState 更新但未显示更改

Question

import React,{useState, useEffect, useRef} from 'react';
import { makeStyles } from '@material-ui/core/styles';

import PostCard from './PostCard'

const useStyles = makeStyles((theme) => ({
    CardContainer: {
      display: "block"
    },
  }));

export default function CardContainer() {
    const classes = useStyles();
    const [posts, setPosts] = useState([]);
  
    useEffect(()=>{
      fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(res => setPosts(res))
      },[])

    console.log(posts)

return (<div className={classes.CardContainer} >
      {!posts.length ? <h1>Loading</h1> : 
      posts.map((post) => {
        <PostCard postInfo={post}/>
      })}
  </div>
  );
}

使用此代码，我看不到 PostCard 组件。 在控制台中首先写入一个空数组，然后来自 fetch 的响应 所以它正确获取但不重新返回？

Answer 1

你没有从你的 .map 函数返回任何东西：

posts.map((post) => {
  <PostCard postInfo={post}/>
})}

要么使用明确的return：

posts.map((post) => {
  return <PostCard postInfo={post}/>;
})}

或者去掉函数体：

posts.map((post) =>
  <PostCard postInfo={post}/>
)}