javascript 更新吞吐量请求后必须刷新浏览器(React js)

dldeef67  于 2023-03-06  发布在  Java
关注(0)|答案(1)|浏览(101)

对于上下文,当用户输入 * 姓名 * 和 * 号码 * 并单击 * 添加 * 按钮时,新的人员信息将自动添加到数据库中。如果 * 姓名 * 已经存在,则会提示"* 姓名 * 在电话簿中已经存在,是否继续使用新号码更新?",如前端的App.js。现在的问题是,当我单击 * 添加 * 按钮时,它显示的信息显示图像如下。是的,它正在更新,但我必须刷新浏览器,让它显示像在第二张图片。这是正常的,它的行为像这样?我包括代码在App.js,代码逻辑和代码显示它。

第二画面

App.js

const addName = (event) => {
    event.preventDefault()

    const nameObject = {
      name: newName,
      number: newNumber
    }

    const changeNumberText = 'is already exist in phonebook, continue to update with new number ?'
    const existingPerson = persons.find(person => person.name.toLowerCase() === nameObject.name.toLowerCase())
    const newPerson = {...existingPerson, number: newNumber}
    
    if (existingPerson && window.confirm(`${existingPerson.name} ${changeNumberText}`)) {
      personService
        .update(existingPerson.id, newPerson)
        .then(response => {
          setPersons(persons.map(person=>person.id === existingPerson.id ? response : person))
          setNewName('')
          setNewNumber('')
          setErrorMessage(
            `${existingPerson.name}'s phone number has been updated`
          )
          setTimeout(() => {
            setErrorMessage(null)
          }, 5000)
        })
    } else if(!existingPerson) {
      personService

Person.js
x一个一个一个一个x一个一个二个x
P. S:控制台日志(响应)

6l7fqoea

6l7fqoea1#

我这应该是写评论,但我没有资格发表评论。希望这会帮助你。
删除按钮弹出,没有姓名和联系电话,表示数组更改后UI更新。但www.example.com和person.number中没有值显示person.name。
console.log并查看值是否未定义。我有预感当您使用

setPersons(persons.map(person=>person.id === existingPerson.id ? response : person))

响应对象可能是这里的罪魁祸首。您可能需要console.log('response ')

在发布控制台日志后编辑

你需要改变

setPersons(persons.map(person=>person.id === existingPerson.id ? response : person))

setPersons(persons.map(person=>person.id === existingPerson.id ? response.data : person))

相关问题