TypeError：cards.map不是函数

Question

我正在尝试学习对钩子的反应，在这一点上，我完全不知道问题是什么。该列表正确呈现，但是当我按下按钮时，我的renderCardList（）中出现“ TypeError：cards.map不是一个函数”。任何帮助将不胜感激。

当我在课堂上使用状态时它起作用

import React, { useState } from 'react';
import RentalCard from './RentalCard';

const RentalCardList = () => {
    const [cards, setCards] = useState([
        { name: 'Anne`s', price: 234 },
        { name: 'John`s', price: 83 },
        { name: 'Mary`s', price: 733 }
    ]);

    const renderCardList = () => {
        return cards.map(c => (
            <RentalCard key={Math.random()} name={c.name} price={c.price} />
        ));
    };

    const add = obj => {
        setCards(cards.push(obj));
        console.log(cards);
    };

    return (
        <div className="container">
            <section id="rentalListing">
                <h1 className="page-title">Our hot listings</h1>
                <div className="row">{renderCardList()}</div>
            </section>
            <br />
            <button
                className="btn btn-primary"
                onClick={() => add({ name: 'jon', price: 27 })}
            >
                View others
            </button>
        </div>
    );
};

export default RentalCardList;

Answer 1

您的问题是调用setCards函数更新cards状态的方式：

const RentalCardList = () => {
  // ...

  const add = obj = {
    setCards(cards.push(obj))
  }
}

根据MDN文档，这是错误的：

该push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

因此，当您使用调用的返回值进行调用cards.push(obj)并设置cards状态时cards.push()，您实际上只是在为其设置一些数字，而cards状态不再是数组。

试试这个，代替：

const RentalCardList = () => {
  const add = obj = {
    setCards([
      ...cards,
      obj
    ])
  }
}

这样，您将创建一个新数组，从“旧”数组中复制项目，并向新数组中添加一个新值。

调用此方法spread syntax，如果您想了解更多，MDN有一个很好的解释：

• 链接