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 中获取响应所以它可以正确获取但不会重新 return?

Answer 1

您没有从 .map 函数返回任何内容：

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

要么使用显式 return:

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

或者去掉函数体：

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

useState 更新但未显示更改

useState updates but changes doesnt show

fetch

reactjs

react-hooks

use-effect

use-state