时间戳

首页 > 解决方案 > React 表单正在呈现以前的值而不是当前值

reactjs - React 表单正在呈现以前的值而不是当前值

问题描述

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

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

此代码是在https://stackoverflow.com/users/5146848/sifat-haque的帮助下制作的

标签： reactjsformsuse-context

解决方案

更新：我修复了你的代码！您的 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;

推荐阅读