React开发中map遍历生成的li元素无法正常渲染显示问题

• 你声明的arrdata、movielist都是组件内部的普通局部变量，React 组件在调用setloaded更新状态后会触发重渲染，重渲染时这些局部变量会被重新初始化，你在fetch异步回调里给它们赋的值会全部丢失，所以最终渲染时读取的movielist是初始的undefined，自然不会显示li元素。

将列表数据存入state中存储，修改后代码如下：

import './App.css';
import {useEffect,useState} from 'react'

function App() {
  const [isLoaded,setLoaded] = useState(false);
  // 用state存储列表数据，重渲染时不会丢失
  const [movieList, setMovieList] = useState([]);

  useEffect(()=>{
    fetch("https://react-http-bcc2a-default-rtdb.firebaseio.com/meals.json")
    .then(res=>res.json())
    .then((data)=>{
      const arrdata = [];
      for( const key in data ){
        arrdata.push({
          title:data[key].title,
          id:key,
          price:data[key].price
        })
      }
      // 把处理好的列表转成元素后存入state
      const renderList = arrdata.map((movie)=>{
        return <li key={movie.id}>{movie.title}</li>
      })
      setMovieList(renderList);
      setLoaded(true);
    })
  },[])


  if(isLoaded){
    return <ul>{movieList}</ul>
  }
  else{
    return <div>...loading</div>
  }
}

export default App;

• 列表渲染的li元素必须加唯一key属性，否则React会抛出警告，这里直接用返回数据的id作为key即可。
• 不需要的冗余导入可以删掉，避免不必要的打包体积增加。

内容的提问来源于stack exchange，提问作者Parviz Pirizade