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.push() 调用的返回值设置 cards 状态时，您实际上只是将其设置为某个整数，并且您的cards状态不再是数组。

试试这个，改为：

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

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

这种方法被称为spread syntax，如果你想了解更多，MDN有一个很好的解释：

• 链接

Answer 2

这会有所帮助

const add = obj => {
        setCards([...cards, obj]);
        console.log(cards);
    };