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

Posted 2023-02-22

【中文标题】无法在我的反应 js 应用程序中执行 PUT 请求

【英文标题】：Not able to perform PUT request in my react js application

【发布时间】：2021-09-24 00:12:21

【问题描述】：

我正在处理要在使用 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;

【问题讨论】：

只需确保您只更新 id 最大为 10 的用户资源。

是的@aitchkhan，我在 id 的范围内执行该功能。但没有任何效果。我认为我在 div 范围内做错了什么

【参考方案1】：

您将得到的响应是一个对象，因此请尝试用 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
            )
          );
        )
    

【讨论】：

我做了更改，先生。我在整个 部分中做错了吗？虽然没有报错，但是逻辑不行..

哇！先生非常感谢您！有效！我会试着理解其中的逻辑。如果我在接下来的几天里有任何疑问，可以联系你吗？

你的实现真的很混乱。尝试拥有一个唯一的 id。我做了res.data.id - 1，这是一个找到正确元素的技巧。尝试首先使用正确的 id 找到正确的元素，而无需 hack。接下来，尝试清除控制台上的所有警告。只需清除这些控制台警告，您就会学到很多东西。

知道了，先生！我试图确定我想要使用的项目，但无法达到那个点。

【参考方案2】：

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

setUserData(res.data);

其次，userData 是一个数组，因此您应该在 put 之后设置更新的响应，如下所示

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

【讨论】：

嗨@moshfiqrony先生！非常感谢您的回答。我做了改变。现在错误消失了，但是更改并没有反映在前端先生上。我该怎么办？

我已经更新了答案 Do this setUserData([...userData.filter(element => element.id === item ? res.data : element)])

您能否在控制台日志中显示您的状态更新数据

使用索引作为键也不是最好的方法，使用items.id作为键

是的，先生！我刚才做了。看到您的消息后，我控制台记录了阵列。值没有改变先生