reactjs - 如何在 ReactJS 上使用嵌套对象数据？

Question

I ADDED ANSWER IN COMMENT

我使用 Node.js 创建了 POST。我在 Postman 中传递的数据看起来像这样。

{ "quantity":20, "with_tax":{ "price":200, "currency":"lkr" } }

我创建了 <div>像这样(在M​​ovie.jsx类中)

 render() {
    return (
      <div className="card" style={{ width: "25rem" }}>
        <form onSubmit={this.props.onPostData}>

含税价格除法

    <div
                className="wrap-input100 validate-input bg1"
                data-validate="Please Type Running Time"
              >
                <span className="label-input100">With Tax Price</span>
                <input
                  type="number"
                  name="with_tax_price"
                  placeholder="With Tax Price"
                  className="form-control"
                  onChange={this.props.onDataChange}
                />
              </div>

含税货币 div

              <div
                className="wrap-input100 validate-input bg1"
                data-validate="Please Type Running Time"
              >
                <span className="label-input100">With Tax Currency</span>
                <input
                  type="text"
                  name="with_tax_currency"
                  placeholder="With Tax Currency"
                  className="form-control"
                  onChange={this.props.onDataChange}
                />
              </div>

在渲染方法中我这样调用Movie类，(在Movies.jsk类中)

class Movies extends Component {
  constructor() {
    super();

这个状态

    this.state = {
      with_tax_price: "",
      with_tax_currency: "",
      quantity: ""
    };
  }

数据更改

  dataChange(ev) {
    this.setState({
      [ev.target.name]: ev.target.value
    });
  }

发布数据

  postData(ev) {
    ev.preventDefault();
    const with_tax_price = this.state.with_tax_price;
    const with_tax_currency = this.state.with_tax_currency;
    var with_tax;
    const quantity = this.state.quantity;

    this.setState({
      loading: true
    });

数据变量

    const data = {
      with_tax: { with_tax_price, with_tax_currency },
      quantity
    };

axios POST

    axios
      .post(apiEndpoint, data)
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

渲染方法

  render() {
    return (
      <Movie
        onPostData={this.postData.bind(this)}
        onDataChange={this.dataChange.bind(this)}
      />
    );
  }
}

Answer 1

将我的代码更改为这个，

在 postData(ev)

{ 
ev.preventDefault();
         const with_tax = {
              price: this.state.with_tax_price,
              currency: this.state.with_tax_currency
            };
        }

数据变量

 const data = {
      with_tax,
      quantity
    };