javascript - 无法在 reactjs 中呈现等待屏幕

Question

function Events(){
const [items, setItems] = useState([])
const fetchItems = async () =>{
    const data = await fetch('https://jsonplaceholder.cypress.io/todos/')
    const items = await data.json();
    return items         
}

useEffect(() =>{ 
    fetchItems().then((items) =>{
        setItems(items)});
},[]
);
if (items ===null) {
    return <h2>Loading posts...</h2>;
  }

return (
    <div>
        {items.map(item=>           
        <h1 key = {item.id}>
            <Link to={`/Events/${item.id}`}>{item.title} </Link>
        </h1>          
        )}
    </div>
);

在给定的代码中，当从 api 获取时，If 语句未运行。我对反应还很陌生，JavaScript 请帮我找出我的错误

标签： javascriptreactjsasync-await

Answer 1

你可以简单地做到这一点：

return (
    <div>
        {items ? items.map(item=>           
        <h1 key = {item.id}>
            <Link to={`/Events/${item.id}`}>{item.title} </Link>
        </h1>          
        ) : <h2>Loading Posts...</h2>}
    </div>
);