React中使用find函数报错TypeError: buyerDetails.find不是函数如何解决？

错误原因 #

find()是数组专属方法，你触发报错的核心原因是buyerDetails在运行时不是数组，存在两个触发场景：

• 初始状态定义错误：你给useState的初始值是{}（空对象），组件第一次渲染时useEffect内的接口请求还未完成，此时buyerDetails是空对象，调用find方法自然会报错。
• 后端返回值异常风险：如果接口返回字段不符合预期，response.data.existingBuyers也可能不是数组，同样会触发该错误。

解决方法 #

1. 修正state初始值 #

将buyerDetails的初始值改为空数组[]：

// 原错误代码
const [buyerDetails, setBuyerDetails] = useState({});
// 修正后
const [buyerDetails, setBuyerDetails] = useState([]);

2. 增加接口返回值校验 #

在给state赋值前先判断返回值是否为数组，避免后端返回异常时前端报错：

useEffect(() => {
    axios
        .get(`/getBuyerDetails`)
        .then((response) => {
            const resData = response.data?.existingBuyers
            // 校验返回值为数组再赋值
            if (Array.isArray(resData)) {
                setBuyerDetails(resData)
            } else {
                console.error('返回的买家数据不是数组：', resData)
            }
        })
        .catch((err) => console.error(err));
}, []);

3. 额外注意类型匹配问题 #

localStorage.getItem()返回的值是字符串类型，如果你接口返回的buyerId是数字类型，用===严格相等判断会匹配不到，建议统一类型后再判断：

// 转为数字对比，也可根据你的实际数据类型转为字符串对比
const oneBuyer = buyerDetails.find(oneBuyer => Number(oneBuyer.buyerId) === Number(buyerId));

完整修正后代码参考 #

import { useState, useEffect } from 'react'
import axios from 'axios'

function VProfile() {
    const buyerId = localStorage.getItem("userId");
    console.log(buyerId);

    // 初始值改为空数组
    const [buyerDetails, setBuyerDetails] = useState([]);

    useEffect(() => {
        axios
            .get(`/getBuyerDetails`)
            .then((response) => {
                const resData = response.data?.existingBuyers
                if (Array.isArray(resData)) {
                    setBuyerDetails(resData)
                }
            })
            .catch((err) => console.error(err));
    }, []);

    console.log(buyerDetails);
    // 统一类型后匹配
    const oneBuyer = buyerDetails.find(oneBuyer => Number(oneBuyer.buyerId) === Number(buyerId));
    console.log(oneBuyer);
    
    // 后续渲染逻辑
    return <div>{/* 替换为你要展示的字段 */}</div>
}

内容的提问来源于stack exchange，提问作者Walpita