时间戳

首页 > 解决方案 > 如何在内部实现带有 Promise 的渲染逻辑？

javascript - 如何在内部实现带有 Promise 的渲染逻辑？

问题描述

我开始阅读 React.js 并面临发生。我向服务器发出获取请求，答案是获取 json 文件。我正在解析这个 json，因为这个承诺是返回的，应该开始'then'，但是我的 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?

}

标签： javascriptreactjs

解决方案

除了从 promise 中返回 JSX，您可以使用在组件状态setState中设置，并在 render 方法中使用。resultthis.state.result

例子

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>

推荐阅读