Reactjs 提交页面上的反应打印axios POST回复

我有一个对flask服务器的axios post请求，它在响应中返回json，如下所示

{contract: 135.35699844360352}

我可以在我记录它的控制台中看到这个响应，但是我在理解如何将它呈现到我的页面上时遇到了困难

我的主要目标是获取工作响应数据并通过render（）html显示在页面上

以下是React的Form.js文件：

import React, { Component } from "react";
import axios from "axios";

class Form extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ticker: "",
    };
  }

  handleTickerChange = (event) => {
    this.setState({
      ticker: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
    axios
      .post("http://127.0.0.1:5000", this.state)
      .then((response) => {
        console.log(response.data);
        this.setState({ contract: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>Ticker </label>
          <input
            type="text"
            name="ticker"
            value={this.state.ticker}
            onChange={this.handleTickerChange}
          />
          <button type="submit">Submit</button>
        </div>
        {this.state.contract}
      </form>
    );
  }
}

export default Form;[![enter image description here][1]][1]

import React，{Component}来自“React”；
从“axios”导入axios；
类形式扩展组件{
建造师（道具）{
超级（道具）；
此.state={
股票代码：“，
};
}
handleTickerChange=（事件）=>{
这是我的国家({
股票代码：event.target.value，
});
};
handleSubmit=（事件）=>{
event.preventDefault（）；
console.log（this.state）；
axios
.post（“http://127.0.0.1:5000“，本州）
。然后（（响应）=>{
console.log（response.data）；
this.setState（{contract:response.data}）；
})
.catch（（错误）=>{
console.log（错误）；
});
};
render（）{
返回(
股票行情
提交
{this.state.contract}
);
}
}
导出默认表单；[！[在此处输入图像描述][1][1]

在handleSubmit函数check response.data中 如果是{contract:135.35699844360352}，则需要将setState函数更改为

 this.setState({ contract: response.data.contract });

或

---

你能把你的回复记录下来吗？是的，回复被记录下来了。你能在你的帖子中更新回复吗？不知道你的意思。我可以更改响应，以便在控制台中获得不同的数据。是的，我想让你看看

const {contract} = response.data
this.setState({ contract: contract });