Question

我是React的新手，我想知道从Promise获取数据的正确方法。

我正在尝试从变量fruits中获取值，但我正在获取console.log() twice。

以下是数据示例：

const fruits = [
  {
     id: '1',
     name: 'apple'
  },
  {
     id: '2',
     name: 'banana'
  }
]

const fruits$ = new Promise((resolve, reject) => setTimeout(resolve, 100, fruits))

这是我尝试过的：

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: []
    }
  }

  render() {
    console.log(this.state.data)
    return ( 
      <p>Hello</p>
    );
  }

  componentDidMount() {
    fruits$
    .then((response) => {
      this.setState({
        data: response
      })
    })
  }
}

直接调用变量和.then()是正确的方法吗？还有其他选择吗？

Answer 1

是的，这是正确的方法，尽管您还应处理承诺被被拒绝的可能性。（当然，您的示例不能被拒绝，但想必您的示例是更复杂内容的简化版本。）

您看到两个对console.log的调用，因为有两个对render的调用，因为您的组件首先使用空白的data状态属性进行渲染，然后在您进行渲染时重新渲染更新data状态属性。避免这种情况的唯一方法是，通过处理组件父级中的promise并将数据通过props传递给该组件，直到数据可用之前才完全渲染该组件。

从变量中获取承诺数据的正确方法是什么？

1 个答案: