Question

寻找React处理某些json的方法，并根据响应加载视图。

例如：

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

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

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

React有一个简单的方法可以解决这个问题吗？提前谢谢！

Answer 1

简单的方法是使用API回调函数中的setState（）来触发新状态，例如下面的示例，尽管我建议使用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"));

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

Answer 2

很简单......

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

根据返回的数据，您决定要渲染的内容......
看看这个例子（工作小提琴）

// In this example, we are using JSONPlaceholer service do real
// request and receive response;
const root = 'http://jsonplaceholder.typicode.com';

const Success = () => (<div>Success!</div>);

const Error = () => (<div>Error! Fix your data!</div>);

const Form = React.createClass({
  getInitialState() {
    return {
      processing: false,
      result: undefined,
    };
  },

  submit(event) {
    this.setState({ processing: true });
    event.preventDefault();

    fetch(`${root}/posts`, {
      method: 'POST',
      data: {
        // your data here...
      }
    })
      .then(response => {
        // We simulate succesful/failed response here.
        // In real world you would do something like this..
        // const result = response.ok ? 'success' : 'error';

        const processing = false;
        const result = Math.random() > 0.5 ? 'success' : 'error';
        this.setState({ result, processing });
      });
  },

  render() {
    const { result, processing } = this.state;

    if (result === 'success')
        return <Success />;

    return (
      <form>
        Form content here<br/>
        <button onClick={this.submit}>
          { processing ? 'Sending data...' : 'Submit' }
        </button>
        { result === 'error' && <Error /> }
      </form>
    );
  },
});

render(<Form />, document.getElementById('root'));

Reactjs：根据响应加载视图

2 个答案: