Javascript 从react输入表单获取数据时出现问题

我只是在制作一个简单的应用程序来学习如何使用redux。 我只想在服务器端的react输入表单中获取数据输入。 问题是服务器端的参数是这样的

{“项目”=>{“名称”=>“未定义”、“价格”=>“未定义”…}

以下是我的部分代码：

import React from "react";

class ItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.update = this.update.bind(this);
  }


  handleSubmit(e) {
    e.preventDefault();
      const ItemData = new FormData();
      ItemData.append("item[name]", this.props.item.name);
      ItemData.append("item[price]", this.props.item.price);
    };

  update(field) {
    return (e) => {
      this.setState({ [field]: e.target.value });
    };
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <div>
            <label>
              <div>Item</div>
              <input
                type="text"
                value={this.props.item.name}
                onChange={this.update("name")}
              />
            </label>
            <label>
              <div>Price</div>
              <input
                type="number"
                value={this.props.item.price}
                onChange={this.update("price")}
              />
            </label>
            <div>
              <input type="submit" value="Submit" />
            </div>
          </div>
        </form>
      </div>
    );
  }
}

从“React”导入React；
类ItemForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.update=this.update.bind（this）；
}
handleSubmit（e）{
e、 预防默认值（）；
const ItemData=new FormData（）；
append（“item[name]”，this.props.item.name）；
append（“item[price]”，this.props.item.price）；
};
更新（字段）{
返回（e）=>{
this.setState（{[field]：e.target.value}）；
};
}
render（）{
返回(
项目
价格
);
}
}

我应该在redux中使用存储功能还是有更简单的方法

谢谢。

我假设问题在于

handleSubmit

函数中可以访问的数据没有被更新，因此您总是会收到初始化组件时使用的值

解决方案

• 根据传入的

  名称

  和

  价格

  道具初始化状态
• 将输入标记的值设置为状态值
• 访问

  handleSubmit

  函数中的状态

从“React”导入React；
从“react router dom”导入{withRouter}；
类ItemForm扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.update=this.update.bind（this）；
此.state={
名称：this.props.item.name，
价格：this.props.item.price
}
}
handleSubmit（e）{
e、 预防默认值（）；
const ItemData=new FormData（）；
append（“item[name]”，this.state.name）；
append（“item[price]”，this.state.price）；
};
更新（字段）{
返回（e）=>{
this.setState（{[field]：e.target.value}）；
};
}
render（）{
返回(
项目
价格
);
}
}
使用路由器导出默认值（ItemForm）；

其他建议

---

• 您的redux包装器组件对此没有太大影响，因此为了清晰起见，您可以将其从这个问题中删除Hi tai fu，欢迎使用堆栈溢出！我不确定我是否理解你的问题谢谢你的回答。是的，我无法将数据传递到服务器端。没问题，希望能有所帮助！如果是这样，请接受此作为您问题的答案，并编辑标题和正文，以便更好地代表您理解的问题