Javascript useState和map-React

我正在使用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} />)}

---

上述错误的可能修复方法是什么？

在未定义的内容上运行

map（）

时会发生这种情况。90%的情况下，这意味着您没有处理axios调用正在进行且变量尚未准备就绪的情况（在本文中，可能是GetAllSuppliers）

---

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

在

设置供应商中，您正在设置一个对象，但需要返回一个要映射的数组

大概是这样的：

  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,
        },
      ];
    });
    ```

我仍然在FileB.js中遇到以下错误：TypeError:无法读取未定义的
GetAllSuppliers的属性“map”。supplier
无效，这不应该是在组件之间传递道具和状态的方式。
  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,
        },
      ];
    });
    ```