React -customers.map 不是一个函数

Question

我的问题是：当我尝试更改输入时，它会抛出customers.map 不是函数。我想更改值并更新数据库中的数据。

//hook for fetching
    const [customers, setCustomers] = useState([]);

    //fetching data from db by id
    useEffect(() => {
        Axios.get(`http://localhost:3001/profile/${id}`)
            .then((response) => {
                if (response) {
                    setCustomers(response.data);
                }
                else {
                    alert('Error')
                }
            })
    }, [])

这是我尝试映射的方式，否则看起来好像是 onChange 方法导致了问题。

    {customers.map(customer =>
        <div key={customer.id}>
            <div className="containerProfile">
                <div className="leftInputProfile">
                    <p>Full Name</p>
                    <input type="text" name='Fullname' placeholder={!customer.Fullname && "Adja meg az adatot"}
                        onChange={(e) => {
                            setCustomers({ ...customers, [e.target.name]: e.target.value });
                        }}
                    />
                </div>
            </div>
        </div>

我知道， .map() 方法必须获取一个数组，但我不知道这里的解决方案:(

response.data:

Answer 1

您将状态设置为一个对象：

setCustomers({ ...customers, [e.target.name]: e.target.value });

如果您想更新特定客户，您可以编写一个单独的处理程序，例如：

const updateCustomer = (customerId) => (event) => {
  const index = customers.findIndex((customer) => customer.id === customerId);

  const nextCustomers = customers.splice(index, 1, {
    ...customers[index],
    [event.target.name]: event.target.value,
  });

  setCustomers(nextCustomers);
}

您必须找到要更新的对象，更新它并将其替换为当前状态。

您的输入至少应具有

您必须分配 值 属性，因为您将其设为 受控组件 与您的输入元素。

Answer 2

我认为你的问题是在你的 onChange 事件中，你通过调用将你的客户设置为一个没有 .map 函数的对象 {}

setCustomers({ ...customers, [e.target.name]: e.target.value });

你必须用方括号 [] 而不是大括号 { 来调用它}：

setCustomers([ ...customers, yourNewCustomer ]);