Question

我开始在React.js中阅读并面对发生。我向服务器发出get请求，答案是get json文件。我正在解析此json，并且由于此承诺返回了已实现的内容，因此应启动“然后”，但是我的renderRoomList（）却一无所获，并且出现错误。如何正确实现逻辑？ Func'renderRoomList'仅在从服务器获取数据后才应返回渲染

load() {
    var result = []
    var promise = new Promise((resolve, reject) => {
       fetch('url', {method: 'GET'})
       .then(response => {
            if(response.ok) {
                return response.json();
            } else {
                throw new Error('error');
            }
        })
        .then(//parsed json and add to result array)
    };
    promise.then(() => {
            return(<div>{result}</div>)
        }
    return //what return?

}

Answer 1

您可以使用setState来将result设置为组件状态，而可以使用this.state.result来代替render方法中的JSX。

示例

function getData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("foobar");
    }, 1000);
  });
}

class App extends React.Component {
  state = { result: "" };

  componentDidMount() {
    this.load();
  }

  load = () => {
    getData().then(result => {
      this.setState({ result });
    });
  };

  render() {
    return <div>{this.state.result}</div>;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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>

<div id="root"></div>

如何实现内部带有承诺的渲染逻辑？

1 个答案: