如何实现不带ID的React HTTP删除请求？

Question

当在服务器中为文档生成ID时，前端如何正确发送HTTP Delete请求？由于HTTP删除请求需要文档的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请求，并使用Name，Number创建一个JS对象，并为其生成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);
}

如何从后端获取ID，以获取前端中的HTTP Delete请求？

由于后端为每个文档生成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>
    );
}

并在顶层组件（人员列表）中定义删除和提取方法。我正在使用React HooksuseStateuseCallback和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}`)