使用 React 时如何修复 400 bad request 错误？答案

【问题标题】：How to fix 400 bad request error when using React?使用 React 时如何修复 400 bad request 错误？
【发布时间】：2018-11-25 04:00:33
【问题描述】：

我有一个按钮和一个文本栏。单击按钮时，它会将在文本栏中输入的 url 发送到 API 并获取响应。我认为这可以通过 setState() 回调函数来解决。但我无法理解如何实现它.....

 class App extends Component {
constructor() {
super();
this.state = {
input:'',
imageUrl:''
}
}
 onInputChange=(event) => {
 this.setState=({input: event.target.value});
 }
 onButtonSubmit = () => {
 app.models.predict(Clarifai.COLOR_MODEL,this.state.input).then(
    function(response) {
    console.log(response);
   },
    function(err) {
  // there was an error
}
);
}
 render() {

        <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit= 
 {this.onButtonSubmit} />       

    <FaceRecognition imageUrl={this.state.imageUrl} />
  </div>   
);
  }
}
 export default App;

【问题讨论】：

你应该更好地格式化你的代码，这样它就可以阅读并清楚你在问什么。
欢迎来到 Stack Overflow 和 React 的世界。当我们定义 constructor() 方法时，它会自动使用 props 对象调用，是的，这与您在功能组件中使用的 props 对象相同。当您定义super() 时，您还必须像这样传递props：super(props);。
@CodeDraken，谢谢我下次会记住这一点:)

标签： reactjs

【解决方案1】：

以下是如何使用文本框中输入的 url 发送 http 请求的演示。

请注意，您错误地使用了 setState 的语法。 setState 是一个函数，应该像这样调用this.setState({ ... });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: ""
    };
  }
  
  onInputChange = event => {
    this.setState({ 
      input: event.target.value
    });
  };
  
  onButtonSubmit = () => {
    fetch(this.state.input)
      .then(() => {
        alert(`Success!`);
      })
      .catch((err) => {
        alert(`Failure: ${err}`);
      });
  };
  
  render() {
    return (
      <div>
          <input type="text" onChange={this.onInputChange}/>
          <button onClick={this.onButtonSubmit}>Submit URL</button>
      </div>
    );
  }
}


ReactDOM.render(
  <App/>,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

【讨论】：