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

【问题标题】：ReactJS: How To Get Input Value From The Prompt Box And Update It To DatabaseReactJS：如何从提示框中获取输入值并将其更新到数据库
【发布时间】：2021-12-31 04:15:29
【问题描述】：

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

我按照此链接中的说明进行操作：[https://stackoverflow.com/questions/54993218/reactjs-using-alert-to-take-input-from-user]

问题是当我点击Edit 按钮并输入提示然后点击OK，它会收到null值，但不会更新数据库。

然后当我再次点击Edit 按钮，没有输入任何内容然后按OK，它将接收第一次输入的值并更新它到数据库（如延迟）。

我想要的是：当点击Edit按钮时，它会显示提示框，并在用户点击时从提示框中取值并更新到数据库中好的。

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

这是我的演示： 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>
    )
}

【问题讨论】：

做两件事；首先记录 enteredFood 而不是 newFoodName 状态。其次，您可以将console.log(newFoodName) 移到函数之外并查看状态是否更新。原因可能是您的状态正在更新，但它不是即时的，因为 React 状态更新是异步的（批量更新）。
你可以使用“useEffect”，当newFoodName改变时调用API更新DB中的foodName

标签： javascript reactjs react-hooks axios prompt

【解决方案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

【讨论】：