无法在我的反应 js 应用程序中执行 PUT 请求

Question

我正在研究要在应用程序中使用 JSON 占位符 API 执行的 CRUD 操作。我想使用 PUT 请求更新 API 的数据并将其显示回我的前端。我实际上是从用户端点获取数据。我无法执行 PUT 请求，我不明白是否在执行 PUT 请求后设置数组。我不断收到错误消息：单击保存更改后 userData.map() 不是函数。我知道我在逻辑上不正确的提取操作之后将单个对象设置为数组。我目前在用axios，也用过fetch()，但是没用。什么都不管用！请帮我解决这个问题。我附上下面的代码。 “handleSave”是我执行更改的函数。

非常感谢您！

    import React, { useState, useEffect } from 'react';
    import { v4 as uuidv4 } from 'uuid';
    import axios from 'axios';

    function Table() {

    const [userData, setUserData] = useState([]);
    const [clickOnEdit, setClickOnEdit] = useState(false);
    const [index, setIndex] = useState("");
    const [name, setName] = useState("")
    const [username, setUsername] = useState("")
    const [email, setEmail] = useState("")
    const [phone, setPhone] = useState("")
    const [website, setWebsite] = useState("")

    useEffect(() => {
        axios.get("https://jsonplaceholder.typicode.com/users").then((res) => {
        setUserData(res.data);
    })
    },[])

    const handleAddRow = () => {
        setUserData([...userData, 
            {
                id: uuidv4(), 
                name: "name", 
                username: "username",
                email: "email",
                phone: "phone",
                website: "website"
            }
        ])
    }

    const handleDelete = (item) => {
        const id = item;
        setUserData(userData.filter((individualItem) => individualItem.id !== id));
    }

    const handleEdit = (item) => {
        const id = item;
        setIndex(id);
        setClickOnEdit(true);
    }


    const handleSave = (item) => {

        setClickOnEdit(false);
        axios.put(`https://jsonplaceholder.typicode.com/users/${item}`,
        {
            name: name, 
            username: username, 
            email: email, 
            phone: phone, 
            website: website
        })
        .then((res) => {
            setUserData(res.data);
        })
    }

    return (
        <div>
            <div>
                <table>
                    <tr>
                        <th>Name</th>
                        <th>Username</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Website</th>
                    </tr>
                </table>
            </div>
            <button onClick={(e) => handleAddRow(e)}>Add row</button>
            {userData.map((items, id) => (
                <div key={id} >
                    <table>
                        <tr>
                            {clickOnEdit ? 
                                <div>
                                    {index === id ?
                                    <div>
                                        <td><input value={name} name="name" onChange={(e) => setName(e.target.value)} /></td>
                                        <td><input value={username} name="username" onChange={(e) => setUsername(e.target.value)} /></td>
                                        <td><input value={email} name="email" onChange={(e) => setEmail(e.target.value) } /></td>
                                        <td><input value={phone} name="phone" onChange={(e) => setPhone(e.target.value)} /></td>
                                        <td><input value={website} name="website" onChange={(e) => setWebsite(e.target.value)} /></td>
                                        <button onClick={() => handleSave(items.id)} >Save entry</button>
                                    </div>
                                    :
                                    <div>
                                        <td>{items.name}</td>
                                        <td>{items.username}</td>
                                        <td>{items.email}</td>
                                        <td>{items.phone}</td>
                                        <td>{items.website}</td>
                                        <button onClick={(e) => handleEdit(items.id, e)} >Edit</button>
                                        <button onClick={() => handleDelete(items.id)}>Delete</button>
                                    </div>
                                    }
                                </div>
                                :
                                <div>
                                    <td>{items.name}</td>
                                    <td>{items.username}</td>
                                    <td>{items.email}</td>
                                    <td>{items.phone}</td>
                                    <td>{items.website}</td>
                                    <button onClick={(e) => handleEdit(items.id, e)} >Edit</button>
                                    <button onClick={() => handleDelete(items.id)}>Delete</button>
                                </div>
                            }
                        </tr> 
                    </table>
                </div>
            ))}
        </div>
    )
}

export default Table;

Answer 1

第一件事 - 您应该始终检查您的回复的状态代码。我的意思是如果它成功那么它的状态代码是什么 returns 通常 get 请求给出 200。如果你不检查它那么如果发生错误那么它也会执行下面的行

setUserData(res.data);

其次，由于 userData 是一个数组，因此您应该在 put

之后设置更新后的响应，如下所示

setUserData([...userData.filter(element => element.id === res.data.id - 1 ? res.data : element)])

Answer 2

您将得到的响应是一个对象，因此请尝试用 res 对象替换该 id。

 const handleSave = (item) => {

        setClickOnEdit(false);
        axios.put(`https://jsonplaceholder.typicode.com/users/${item}`,
        {
            name: name, 
            username: username, 
            email: email, 
            phone: phone, 
            website: website
        })
        .then((res) => {
          setUserData(
            userData.map((user) =>
              user.id === res.data.id - 1 ? res.data : user
            )
          );
        })
    }

无法在我的反应 js 应用程序中执行 PUT 请求

Not able to perform PUT request in my react js application

api

reactjs

axios

react-hooks

jsonplaceholder