React .map 不是对象数组上的函数

Question

我正在尝试从我的 api 获取所有产品。
产品 API 代码如下。
下面的代码运行良好：

const heh = () => {
        products.map((p) => console.log(p.id))
    }

问题是我的const allProducts 中的 products.map 告诉我TypeError: products.map is not a function。
附：我检查了所有类型。我得到对象数组。 完整代码如下：

const Product = ({products}) => {
    const heh = () => {
        products.map((p) => console.log(p.id))
    }
    const allProducts = products.map((p) => (
        <div className="product" key={p.id}>
            <h3>{p.name} - {p.price}</h3>
            <p>{p.description}</p>
        </div>)
        )
    return (
        <div>
            <button onClick={() => heh()}>Click</button>
            {allProducts}
        </div>
        
    )
}


const Test = () => {
    const [products, setProducts] = React.useState([])

    React.useEffect(() => {
        const fetchProducts = async () => {
            const result = await axios('/api/v1/products')
            console.log(result.data.data)
            setProducts(result.data)
        }

        fetchProducts()
        
    }, [])

    return (
        <div>
            <Product products={products} />
        </div>
    )
}

ReactDOM.render(React.createElement(Test), document.getElementById('app'))

TS：

const result = await client.query("SELECT * FROM products")
        const products = new Array()

        result.rows.map(p => {
            let obj: any = new Object()
            result.rowDescription.columns.map((el, i) => {
                obj[el.name] = p[i]
            })

            products.push(obj)
        })

        response.body = {
            success: true,
            data: products
        }

Answer 1

products 的初始状态是 0。这意味着当您第一次将它传递给Product 时，它将是一个数字，而不是一个数组。数字没有map 函数，所以你会得到一个错误。

如果products 将是一个数组，则使用[] 作为其初始状态：

const [products, setProducts] = React.useState([])
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^

...或像null 这样的标志值，您在尝试使用map 之前检查它。

---

旁注：您错误地使用了map。如果您没有从map 回调中返回值，并且没有使用map 创建的新数组，则不应使用map。使用forEach 或简单的循环。

Answer 2

你为什么不试试这个：

return (
        <div>
            <button onClick={() => heh()}>Click</button>
            {products.map((p) => (
        return (<div className="product" key={p.id}>
            <h3>{p.name} - {p.price}</h3>
            <p>{p.description}</p>
        </div>))}
        </div>
        
    )

Answer 3

当你的heh函数执行时，产品列表已经被加载，它是一个数组。

const allProducts = ... 行出现错误，因为您将 products 的默认值设置为数字。在这一行

const [products, setProducts] = React.useState(0)

默认替换为空数组将解决您的问题：

const [products, setProducts] = React.useState([])

Answer 4

您收到错误是因为您使用 0 初始化 products 道具的状态，这不是可迭代对象。使用 useState([]) 对其进行初始化。

Answer 5

当您输入问题标题时，您应该立即发现问题 -

React .map 不是对象数组的函数

你认为你有一个对象数组。但是如果你没有.map 来调用它，那么你就没有数组。真的，就是这么简单。