javascript - 为什么 data.map 不是函数？

Question

我在 React 中构建了以下组件:

import React, { useState } from 'react';


export default function Exemple(){

    var friend = function (id, firstName, lastName){
        this.id = id; this.firstName = firstName; this.lastName = lastName
    }

    var [data, setData] = useState( [
        new friend(1, 'jon', 'well')
    ])

    var newFriend =  new friend();

    function addFriend(e){  
        newFriend[e.target.id] = e.target.value;
    }

    function saveFriend(){
        setData(data.push(newFriend));
    }

    return( 
    <div className="my-table-friends">
         <table className="table">
    <thead>
      <tr>
        <th className="my-table-th">id</th>
        <th className="my-table-th">first name</th>
        <th className="my-table-th">last name</th>
      
      </tr>
    </thead>
        <tbody>
          
            {data.map((d)=>{return(
                <tr>
                    <td>{d.id}</td>
                    <td>{d.firstName}</td>
                    <td>{d.lastName}</td>
                </tr>)
            })}
        </tbody> 
  </table>

  

    <form>
    <label for="fname">id</label><br />
    <input type="text" id="id" name="fname" onChange={addFriend}/><br />
    <label for="fname">first name</label><br />
    <input type="text" id="firstName" name="fname" onChange={addFriend} /><br />
    <label for="lname">last name</label><br />
    <input type="text" id="lastName" name="lname" onChange={addFriend}/><br />
    <button onClick={saveFriend}>add</button>
    </form>
 
    </div>)
}

这里有一张 friend 表，还有一个添加 friend 的表格。
该表从“数据”数组中获取其数据，并使用 map 函数显示它。
出于某种原因，当我更新数组时，数组变成了一个对象，并得到一个错误，即 data.map 不是函数。
对此有何解释？

Answer 1

您正在改变状态并将其设置为整数。以下是错误的:

setData(data.push(newFriend));

相反，请这样做:

function saveFriend(){
  const newData = [...data, newFriend];
  setData(newData);
}

或者以简单的方式:

function saveFriend(){
  setData([...data, newFriend]);
}

这不起作用的原因是，Array.push()返回数组的长度，从而设置 data到一个号码。并且整数没有 map()函数，所以你得到错误。