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

问题描述

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

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

据我所知，发生错误是因为对象 (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');
});

标签： javascriptmysqlnode.jsreactjsexpress

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

问题描述

解决方案

推荐阅读