javascript - 如何实现带有 promise 的渲染逻辑？

Question

我开始阅读 React.js 并面对发生的事情。我向服务器发出获取请求，答案是获取 json 文件。我正在解析这个 json，因为这个 promise 返回了 fulfilled，应该从“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?

}

Answer 1

您可以使用 setState 而不是从 promise 返回 JSX设置 result在你的组件状态下，使用 this.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>