Array.map 不是函数（datalist 不会更新）

Question

我一直在关注 youtube 上的这个教程系列，但我一直遇到这个错误（可以在此处找到教程的链接 https://www.youtube.com/watch?v=re3OIOr9dJI&t=11s&ab_channel=PedroTech）。

应用程序应该从 mysql 数据库中提取信息并在加载新条目时将其添加到网页中，但我收到以下错误“TypeError: movieReviewList.map is not a function”。

据我所知，发生错误是因为对象 (movieReviewList) 没有被实例化并且 javascript 无法将其识别为数组。

前端代码：

import './App.css';
import Axios from 'axios';
import React, {useState, useEffect} from 'react';
//import bodyParser from 'body-parser';



function App() {

  //get movie name/review from form
  const [movieName,setMovieName] = useState('')
  const [review, setReview] = useState('')
  const [movieReviewList, setMovieList] = useState([])
  //const [number, setNumber] = useState('')
  useEffect(()=>
  { 
    Axios.get("http://localhost:3001/api/get").then((response) =>{
    //setNumber(2);
    //console.log(number);
    setMovieList(response.data)
    console.log(movieReviewList);
    //console.log("stuff");
    //console.log(response.data);
    })
  }, []);
  const submitReview =  () => {
    Axios.post("http://localhost:3001/api/insert", {
      movieName: movieName,  
      movieReview: review
    }).then( (setMovieList(...movieReviewList, {movieName: movieName, movieReview: review})))
  };
  return (
    <div className="App">
      <h1>Crud tutorial</h1>
      <div className="form">
      <label htmlFor="getName">Movie Name</label>
      <input placeholder="movie name" type="text" id="getName" onChange={(e)=>{
        setMovieName(e.target.value)
      }}/>
      <label>Movie review</label>
      <input type="text" placeholder="review" onChange={(e)=>{setReview(e.target.value)}}/>
      <button onClick={submitReview} >Submit</button>


    
      {
      
        movieReviewList.map( (val) =>
        { 
          return <h1>Movie: {val.movieName} | Movie Review: {val.movieReview}</h1>
        })
      
        }
      
      
      
      </div>
    </div>
  );
}

export default App;

后端：

const express = require('express');
const app = express();

const cors = require("cors");

const mySql = require('mySql');

const bodyParser = require('body-parser');
//const { urlencoded } = require('body-parser');

//bodyparsers is causing conflicts with express? 
//app.use(bodyParser.urlencoded);
//app.use(bodyParser.json);

app.use(express.urlencoded({extended: true}));
app.use(express.json())
//app.use(bodyParser);
//resolves cors permission error
app.use(cors());

const db = mySql.createPool({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'cruddatabase'
});


app.get('/', (req, res) => {
    res.send("crud database root")
});


//called recursively
app.get('/api/get', (req, res) => { 
    const sqlSelect = "SELECT * FROM movie_reviews";
    db.query(sqlSelect, (err, result) =>{
        console.log("recursion test");
        if(err)
            console.log(err);
        else    //"res" was already defined within this scope, which is why I use "result"
        {
            console.log('get operation was successful');
            res.send(result); //json file sent to the front end upon successful query

        }
    });
    
});
app.post('/api/insert', (req, res) => {
    
    const movieName = req.body.movieName;
    const movieReview = req.body.movieReview;
    
    //(?,?) serves as a placeholder 
    const sqlInsert = "INSERT INTO movie_reviews (movieName, movieReview) VALUES (?, ?)";
    db.query(sqlInsert, [movieName, movieReview],  (err, result) => {
        console.log("insert operation successful");
    });
});


//because port 3000 is in use

app.listen(3001, () => {
    console.log('server activated on port 3001');
});

Answer 1

在提交审核时，您缺少方括号：

您需要将其更改为：

const submitReview =  () => {
    Axios.post("http://localhost:3001/api/insert", {
      movieName: movieName,  
      movieReview: review
    }).then( (setMovieList([...movieReviewList, {movieName: movieName, movieReview: review}])))
  };

发生这种情况的原因是因为您将 movieList 从数组更改为对象。我建议你阅读spread syntax

Answer 2

使用

res.status(200).json(results);