ReactJS：如何从提示框获取输入值并更新到数据库

Question

我正在构建一个 MERN 应用程序，我想让用户通过单击 Edit 按钮 .[=16 在提示框中编辑食物名称=]

我按照 link 中的说明进行操作：[

问题是当我单击 Edit 按钮并在提示中键入然后单击确定时，它将第一次收到 null 值，但不会更新数据库。

然后当我再次单击 Edit 按钮时，不输入任何内容然后按 OK，它将从第一次输入中接收值并将其更新到数据库（如延迟）。

我要的是：当点击Edit按钮时，会出现提示框，从提示框中取值更新到数据库当用户点击 OK.

有什么办法可以解决这个问题吗？谢谢大家！

这是我的演示： gif

这是我的代码：

function FoodListTable(props) {
    /* Definition of handleClick in component */
    const [newFoodName, setNewFoodName] = useState("")

    const handleEdit = () => {
        const enteredFood = prompt('Please enter your new food:')

        setNewFoodName(enteredFood)

        console.log(newFoodName)

        if (newFoodName) {
            Axios.put("https://mern-lefood.herokuapp.com/update", {
                newFoodName: newFoodName,
                id: props.val._id
        })
    }
}

return (
        <button onClick={handleEdit}>Edit</button>
    )
}

Answer 1

React this.setState，并且useState不直接对状态对象进行更改。

React this.setState 和 React.useState 为 React 核心创建队列以更新 React 组件的状态对象。

因此出于性能原因，更新 React 状态的过程是异步的。这就是为什么变化不会立竿见影的原因。

尝试下面有效的代码！

function FoodListTable(props) {
  /* Definition of handleClick in component */
  const [newFoodName, setNewFoodName] = useState("");

  const handleEdit = () => {
    const enteredFood = prompt('Please enter your new food:');
    setNewFoodName(enteredFood);

    if (enteredFood) {
      Axios.put("https://mern-lefood.herokuapp.com/update", {
        newFoodName: enteredFood,
        id: props.val._id
      })
    }
  }

  return (
    <button onClick={handleEdit}>Edit</button>
  )
}

更多详情Click here

ReactJS：如何从提示框获取输入值并更新到数据库

ReactJS: How To Get Input Value From The Prompt Box And Update It To Database

javascript

prompt

reactjs

axios

react-hooks