Javascript，类型错误：Information.map不是函数| |如何使用.map？

Question

我目前正在学习crud与express和node的反应。我成功地将数据插入到数据库中，但当我想表示我在使用.map时出错的数据时，我感到困惑

这是我的代码。请帮忙。

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




function App() {
  const [Name, setName] = useState ("");
  const [Subject, setSubject] = useState (""); 
  const [Message, setMessage] = useState ("");
  const [Information, setInformation] = useState ("");
  

  const addCRUD = () => {
    
    axios.post('http://localhost:3001/create',{
      Name: Name,
      Subject: Subject,
      Message: Message}).then(() => {
        console.log("Success")
         })
  }

  const getCRUD = () => {
    axios.get('http://localhost:3001/DATA').then((response) => {
        setInformation(response.data)
         })
  }


  return (
    <div className="App">
      <div className="container">
      <form>
        <div className="input-group">
          <span className="input-group-addon"><i className="glyphicon glyphicon-user"></i></span>
          <input onChange={(event)=> {
            setName(event.target.value);
          }} id="Name" type="text" className="form-control" name="Name" placeholder="Name"/>
        </div>
        <div className="input-group">
          <span className="input-group-addon"><i className="glyphicon glyphicon-comment"></i></span>
          <input onChange={(event)=> {
            setSubject(event.target.value);
          }}id="Subject" type="subject" className="form-control" name="subject" placeholder="Subject"/>
        </div>
        <div className="input-group">
          <span className="input-group-addon">Message</span>
          <input onChange={(event)=> {
            setMessage(event.target.value);
          }}id="Message" type="text" className="form-control" name="Message" placeholder="Message"/>
        </div>
      
      </form>
      <div className="input-group"> 
          <input onClick={addCRUD}
          id="btn" type="button" className="btn btn-warning" name="btn" placeholder="Submit" value="Submit"/>
        </div>
      </div>
      
      <div className="input-group">
      <input onClick={getCRUD}
      id="btn" type="button" className="btn btn-primary" name="btn" placeholder="Show Data" value="show data"/>
      {Information.map((val,key) => {
        return (
          <div> 
            <h3>
              Name: {val.Name}
            </h3>
          </div>
        )
      }
      )}
      </div>   

    </div>
  );
}

export default App;

我得到的错误62|

63 |

Answer 1

将数据放在阵列上：

const [Information, setInformation] = useState([]);

Answer 2

您的数据必须是一个数组来应用映射。

const [Information, setInformation] = useState([]);

Answer 3

需要将数组而不是字符串设置为初始值。

同样，response.data也应该是一个数组。

const [Information, setInformation] = useState ([]);