Question

仅在呈现页面后，我才需要向API发出请求。为此，我使用了异步函数，并在return方法中使用了Promise，但出现了错误：

Nothing was returned from render.

class Main extends Component {
    constructor(props) {
       super(props)
       this.data = []
    }

    async getRequest() {
       const response = await fetch({'http://my url'})
       const data = await response.json();
       //exampe
       this.data = data[0]
       return respons
    }

    render() {
        this.getRequest()
            .then((data) => {
               return(
                  <div>
                    {this.data}
                  </div>
               )
            }
     }
}

我认为最好的是使用承诺。如何固定？谢谢

Answer 1

您无法在渲染中进行数据获取和承诺。您应该将所有API调用移至groupUp xs= helper 0 xs where helper _ []=[] helper i xs= takeWhile (==(xs!!i))xs: helper (i) (dropWhile (==(xs!!i))xs)，并且render应该只是返回元素。

componentDidMount

如注释中所述，对于SSR，您可以尝试使用getDerivedStateFromProps代替componentDidMount() { this.getRequest() .then((data) => { this.setState({ data }) }) } render() { return( <div> {this.state.data} </div> ) }。这将需要React v16.3及更高版本。

承诺返回时，渲染未返回任何内容

1 个答案: