React 表单正在呈现以前的值而不是当前值答案

【问题标题】：React form are rendering the previous value and not the currentReact 表单正在呈现以前的值而不是当前值
【发布时间】：2020-12-18 01:50:36
【问题描述】：

我的反应表单使用 useContext 将值保存到全局状态。尝试将值从 1-5 更改为呈现前一个数字而不是当前数字。我该如何改变这种行为？

沙盒链接https://codesandbox.io/s/funny-antonelli-0d0rl?file=/src/UpdateForm.js

这段代码是在https://stackoverflow.com/users/5146848/sifat-haque的帮助下编写的

【问题讨论】：

标签： reactjs forms use-context

【解决方案1】：

更新：我修复了你的代码！您的 ValueContext 在同一个文件中也有错误。您正在使用 updateValue，但未在上下文中设置（setValue 是正确的）。所以我将 2 个 updateValue 调用更改为 setValue 和瞧！

第二次更新（更多是旁注）：我会避免重复使用这么多相同或相似的变量名称，如 ItemValue 和 Itemvalue，这确实会使代码更难阅读，并使这些类型的错别字更容易产生，并且更难修复。我也会尝试使用 camelCase 对非组件项目做出反应，例如（itemValue）或至少（item-value）。

最后编辑：您还在渲染方法中将此组件的“三”拼错为“树”！

完整的固定代码请参阅原始评论...希望我有所帮助！

原文：我还没有弄清楚您的代码，但我注意到您在 UpdateForm 中的代码中有错字。您有：itemvalue（未定义），当我进入 ValueContext 页面时，我注意到您将其列为：Itemvalue。请务必检查其他拼写错误并确保使用正确的变量。

工作代码：

import { ValueContext } from "./ValueContext";

const UpdateForm = ({ id }) => {
  const [ItemValue, setItemValue] = useState();
  const [value, setValue] = useContext(ValueContext);

  const addValue = (event) => {
    const updatedData = value.map((obj) => {
      if (obj.id === id) {
        return { ...obj, Itemvalue: ItemValue };
      } else return obj;
    });
    setValue(updatedData);
    console.log(ItemValue);
  };

  const updateItemValue = (event) => {
    event.preventDefault();
    setItemValue(event.target.value);
    addValue();
  };

  return (
    <>
      <form>
        <label> Value: </label>
        <select value={ItemValue} onChange={updateItemValue}>
          <option value={0}>zero</option>
          <option value={1}>one</option>
          <option value={2}>two</option>
          <option value={3}>tree</option>
          <option value={4}>four</option>
          <option value={5}>five</option>
        </select>
      </form>
    </>
  );
};

export default UpdateForm;

【讨论】：

是的，你说得对，那是一个错字。我在 ValueContext 页面中更改为“itemvalue”，但结果仍然相同。
我不确定您是否收到我的编辑通知...我修复了您的代码，在我的示例中，我将表单页面更改为“Itemvalue”而不是您提到的...阅读以上=]