useState 和 map - React

Question

我在前端使用 React。 我正在使用功能组件。我正在使用 Axios 从 API 中获取数据。

在文件 GetAllSuppliers.js 中，我有以下内容：

function GetAllSuppliers(){
    const [supplier, setSupplier] = useState([]);



    useEffect(() => {
        return axios.get(`http://localhost:8080/api/suppliers/supplier/list`)
            .then((response) =>{
                setSupplier((prevState) =>({ ...prevState,
                    id: response.data.id ,
                    supplierTitle: response.data.supplierTitle,
                    supplierFirstName: response.data.supplierFirstName,
                    supplierLastName: response.data.supplierLastName,
                    companyName: response.data.companyName,
                    phoneNumber: response.data.phoneNumber,
                    otherPhoneNumber: response.data.otherPhoneNumber,
                    accountNumber: response.data.accountNumber,
                    email: response.data.email,
                    address: response.data.address,
                    website: response.data.website,
                    hourlyRate: response.data.hourlyRate,
                    typeOfGoods: response.data.typeOfGoods,
                    paymentTerms: response.data.paymentTerms,
                    createdAt: response.data.createdAt,
                    notes: response.data.notes,
                    products: response.data.products,
                    components: response.data.components
                }));

            }).catch((error) =>{
            setSupplier(error);
        })
    });

}

//other functions

export { GetAllSuppliers, other functions .... };

在 FileB.js 中，我有以下代码：

{GetAllSuppliers.supplier.map(t => <TableRow key={`supplier-${t.id}`} {...t} />)}

我收到以下错误：

TypeError: Cannot read property 'map' of undefined

对上述错误有什么可能的解决方法？

Answer 1

当您在未定义的内容上运行 map() 时会发生这种情况。 90% 的时间，这意味着您没有处理 axios 调用正在进行中并且您的变量尚未准备好（在这种情况下可能是 GetAllSuppliers）的情况。

放入处理这种情况的条件返回。

Answer 2

在您的setSupplier 中，您正在设置一个对象，但您需要返回一个数组来映射。

类似这样的：

  setSupplier((prevState) => {
      return [
        ...prevState,
        {
          id: response.data.id,
          supplierTitle: response.data.supplierTitle,
          supplierFirstName: response.data.supplierFirstName,
          supplierLastName: response.data.supplierLastName,
          companyName: response.data.companyName,
          phoneNumber: response.data.phoneNumber,
          otherPhoneNumber: response.data.otherPhoneNumber,
          accountNumber: response.data.accountNumber,
          email: response.data.email,
          address: response.data.address,
          website: response.data.website,
          hourlyRate: response.data.hourlyRate,
          typeOfGoods: response.data.typeOfGoods,
          paymentTerms: response.data.paymentTerms,
          createdAt: response.data.createdAt,
          notes: response.data.notes,
          products: response.data.products,
          components: response.data.components,
        },
      ];
    });
    ```