React项目报错Array.map is not a function 数据列表不更新如何解决？

TypeError: movieReviewList.map is not a function 报错的核心原因是 movieReviewList 被修改为了非数组类型，自然没有数组的map方法，导致渲染时出错。具体的错误点有两处：

1. 前端提交评论的状态更新逻辑写法错误 #

你写的submitReview函数中setMovieList的调用不符合规范：

• 直接把setMovieList放在then的参数里执行，没有包裹在回调函数中，会导致post请求还没返回就提前执行状态更新
• 更新状态时没有把原数组包裹在新数组的方括号中，直接...movieReviewList作为参数传入，setMovieList拿到的第一个参数是原数组的第一个元素，直接把movieReviewList的类型从数组改成了非数组

2. 后端插入接口没有返回响应 #

后端的/api/insert接口执行完插入操作后没有给前端返回任何响应，会导致前端的post请求一直处于pending状态，最终超时报错，虽然不是直接导致map报错的原因，但属于必须修复的异常点。

前端代码修改 #

首先修复submitReview函数和状态更新逻辑 #

如果想直接更新本地状态，修改为如下写法：

// 可以把拉取数据的逻辑单独封装，方便复用
const getReviewList = () => {
  Axios.get("http://localhost:3001/api/get").then((response) =>{
    setMovieList(response.data)
  })
}

useEffect(()=>{ 
  getReviewList()
}, []);

const submitReview =  () => {
  Axios.post("http://localhost:3001/api/insert", {
    movieName: movieName,  
    movieReview: review
  }).then(() => {
    // 写法1：直接更新本地状态，要把原数组展开在新数组的方括号内
    setMovieList([...movieReviewList, {movieName: movieName, movieReview: review}])
    // 写法2：重新拉取全量数据，保证和数据库数据完全一致，更推荐用这种
    // getReviewList()
  })
};

然后修改渲染部分，加可选链和key属性，避免异常和React告警 #

{
  // 加可选链?，只有movieReviewList是数组的时候才执行map
  movieReviewList?.map( (val) =>
  { 
    // 给循环生成的元素加唯一key，这里用数据库返回的id即可
    return <h1 key={val.id}>Movie: {val.movieName} | Movie Review: {val.movieReview}</h1>
  })
}

后端代码修改 #

给/api/insert接口加上响应返回：

app.post('/api/insert', (req, res) => {
    const movieName = req.body.movieName;
    const movieReview = req.body.movieReview;
    
    const sqlInsert = "INSERT INTO movie_reviews (movieName, movieReview) VALUES (?, ?)";
    db.query(sqlInsert, [movieName, movieReview],  (err, result) => {
        if(err) {
            console.log(err);
            res.status(500).send('插入失败')
            return
        }
        console.log("insert operation successful");
        res.send('插入成功')
    });
});

内容的提问来源于stack exchange，提问作者Caleb Williams