Javascript Reactjs：基于响应加载视图

正在寻找React处理一些json的方法，并基于响应加载视图

例如：

1-React有一个表单，响应发送到外部API

2-API处理输入，返回成功代码，除非存在验证问题，并将响应发送回React应用程序

3-React获取json响应，加载“Success”视图，或者重新加载表单并输出错误

---

有没有一个简单的方法来处理这个问题？提前谢谢

简单的方法是使用setState（）从API回调函数触发新状态，如下面的示例所示，尽管我建议使用Redux之类的库进行状态管理

var MainComp = React.createClass({
    getInitialState: function() {
      return {someProp: ""}
    },

    callAPI: function() {
        var root = 'http://jsonplaceholder.typicode.com';

        $.ajax({
          url: root + '/posts/1',
          method: 'GET'
        }).then(function(data) {
          this.setState({someProp: data.body})
        }.bind(this));
    },

    render: function(){
      return (        
        <div>                 
          <h2>{this.state.someProp}</h2>
          <button onClick={this.callAPI}>Async</button> 
        </div>
      )      
    }
});



React.render(<MainComp/>, document.getElementById("app"));

var MainComp=React.createClass({
getInitialState:函数（）{
返回{someProp:}
},
callAPI:function（）{
变量根http://jsonplaceholder.typicode.com';
$.ajax({
url:root+'/posts/1'，
方法：“获取”
}).then（功能（数据）{
this.setState（{someProp:data.body}）
}.约束（这个）；
},
render:function（）{
报税表（
{this.state.someProp}
异步的
)      
}
});
React.render（，document.getElementById（“app”）；

请注意，这是一个简单的例子，您仍然应该掩盖错误情况，并构建一个逻辑，根据状态触发不同的视图。

非常简单

基本上，您需要跟踪何时启动请求（发送数据）以及何时完成请求（接收响应）

根据返回的数据，您可以决定渲染什么…
看看这个例子（工作小提琴）

//在本例中，我们使用的是JSONPlaceholer服务do real
//请求和接收响应；
常数根http://jsonplaceholder.typicode.com';
const Success=（）=>（Success！）；
常量错误=（）=>（错误！修复数据！）；
const Form=React.createClass({
getInitialState（）{
返回{
处理：假，
结果：未定义，
};
},
提交（活动）{
this.setState（{processing:true}）；
event.preventDefault（）；
获取（`${root}/posts`{
方法：“POST”，
数据：{
//你的数据在这里。。。
}
})
。然后（响应=>{
//我们在这里模拟成功/失败的响应。
//在现实世界中，你会这样做。。
//const result=response.ok？'success'：'error'；
常量处理=假；
const result=Math.random（）>0.5？'success'：'error'；
this.setState（{result，processing}）；
});
},
render（）{
const{result，processing}=this.state；
如果（结果==“成功”）
返回；
返回(
在此处形成内容

{正在处理？'Sending data…'：'Submit'}
{result==='error'&&}
);
},
});
render（，document.getElementById（'root'））；

基本上，您必须考虑填写表单、发送表单/等待响应、查看结果这三种情况下的状态变化。然后视图对应用程序所处的状态做出反应。首先考虑数据结构/状态，然后我会阅读文档中的表单：此外，视图对状态的“反应”可以像

if

语句一样简单，该语句根据所述状态呈现不同的组件。请记住，

render

在每次调用

setState

时都会被调用。