如何实现没有 ID 的 React HTTP 删除请求？

Question

在服务器为文档生成ID时，前端如何正确发送HTTP Delete请求？由于 HTTP Delete 请求需要文档的 ID 路由到服务器，但 ID 是在服务器中生成的，前端如何知道生成的 ID？

在我的服务器中：

let persons = [ // my "database"
    {
    "name": "Arto Hellas",
    "number": "040-123456",
    "id": 1
    },
    {
    "name": "test1",
    "number": "111-111-1111",
    "id": 4168 //GENERATED AFTER RECEIVING AN HTTP POST REQUEST
    },
    {
    "name": "test2",
    "number": "222-222-2222",
    "id": 839 //GENERATED AFTER RECEIVING AN HTTP POST REQUEST
    }

];

app.delete('/api/persons/:id', (req,res) => {
    let id = Number(req.params.id);
    persons = persons.filter(person => person.id !== id);
    res.json(persons);
});

const generateId = () => {
    return Math.floor(Math.random() * 10000); //0 to 9999
}

app.post('/api/persons', (req,res) => {
    let body = req.body;

    let newPerson = {
        name: body.name,
        number: body.number,
        id: generateId()
    }

    persons = persons.concat(newPerson);
    res.json(persons);
});

当我的前端向后端创建 HTTP Post 请求时，它会发送一个名称和编号。后端收到Post请求，创建一个JS对象，Name,Number，并为它生成一个ID，然后追加到我的数组"database"。

这是我有问题的具有删除功能的 React 组件，

const PhoneBookEntry = ({ name, number, persons, setPersons}) => {

    const deletePerson = () => {
        phonebookComm
            .delPerson(id) // *** how can my frontend determine the IDs generated in the backend?
            .then( res => {
                //updating my application's persons state
                persons.splice(persons.findIndex(element => element.name === name), 1 ); 
                setPersons(persons.map(person => person.name !== name ? person : null));                                                    
            })
            .catch( error => {
                console.log('error', error);
            })
    }

    return (
        <div>
            <div className="personAndDelBtn">{name} {number} </div>
            <button className="personAndDelBtn" onClick={deletePerson}>delete</button>
        </div>
    );
}

phonebookComm 使用 axios 的地方：

const delPerson = id => {
    return axios.delete(`${baseUrl}/${id}`).then(res => res.data);
}

对于前端的 HTTP 删除请求，如何从后端获取 ID？

由于后端为每个文档生成 ID，因此前端不知道文档的 ID。当前端需要发送HTTP删除请求时，它如何知道使用什么ID？

Answer 1

您可能需要在 POST 请求成功后更新新创建的用户：您拥有 ID，因为后端会在 POST 响应中向您发送新创建的用户（带有 ID） :

app.post('/api/persons', (req,res) => {
    let body = req.body;

    let newPerson = {
        name: body.name,
        number: body.number,
        id: generateId()
    }

    persons = persons.concat(newPerson);
    res.json(persons);
});

Answer 2

您的 PhoneBookEntry 组件是人员列表中的一行，不是吗？想一想，你必须有办法从你的服务器上得到这个人的名单。像这样：

app.get('/api/persons', (req,res) => {
    res.json(persons);
});

您应该在每次编辑操作（如删除）后从服务器重新加载人员列表。类似地管理本地数据库和服务器数据库不是一个好主意。

我的建议是从PhoneBookEntry组件中移动删除方法。

const PhoneBookEntry = ({ name, number, onDelete}) => {
    return (
        <div>
            <div className="personAndDelBtn">{name} {number} </div>
            <button className="personAndDelBtn" onClick={onDelete}>delete</button>
        </div>
    );
}

并在顶级组件（人员列表）中定义 delete 和 fetch 方法。我正在使用 React Hooks useState useCallback 和 useEffect。他们很棒，试穿！

const PhoneBook = () => {

// book state
    const [list, setList] = useState([]);
// loading flag
    const [loading, setLoading] = useState(true);

    const fetch = useCallback(() => fetchPersons().then((res) => setList(res), [])

    const deletePerson = useCallback((id) => delPerson(id).then(() => fetch()), [])

//this will run fetch after the component was mounted and rendered in the first time
    useEffect(() => {
        fetch().then(() => setLoading(false))
    }, [])

    if (loading) {
        return <div>Loading contacts... </div>
    }

    return <ul>
        {list.map((person) => {
            return <li>
                <PhoneBookEntry name={person.name} number={person.number} onDelete={() => deletePerson(person.id)}
                                key={person.id}/>
            </li>
        })}
    </ul>

}

您可以像这样定义 fetch 方法

const fetch = () => axios.get(`${baseUrl}`)

如何实现没有 ID 的 React HTTP 删除请求？

How to implement React HTTP delete requests without an ID?

node.js

http-delete

reactjs

server

axios