react 把前后台的axios请求放在一起_javascript - 如何在渲染react组件之前让axios获取请求等待？ - SO中文参考 - www.soinside.com...

我有以下代码。import React from "react";

import TextField from "@material-ui/core/TextField";

import Autocomplete from "@material-ui/lab/Autocomplete";

import axios from "axios";

var config = {

headers: {

Accept: "application/json; odata=verbose",

Authorization: "Bearer " + access_token,

},

};

class Searchbar extends React.Component {

async componentWillMount() {

await axios.get(contracts, config).then((res) => {

this.setState({ allContracts: res.data });

});

}

render() {

return (

freeSolo

id="contract-search-bar"

disableClearable

options={contracts.map((option) => option.name)}

onChange={(event, value) => {

let selectedContractID =(value)

}}

renderInput={(params) => (

{...params}

label="Search"

margin="normal"

variant="outlined"

InputProps={{ ...params.InputProps, type: "search" }}

/>

)}

/>

);

}

}

export default Searchbar;

我使用组件将加载，因为我想让这个函数在渲染我的组件之前先进行调用... axios调用会得到如下的结果。results = [

{ name: "aaa" },

{ name: "bb" },

{ name: "cccc" },

];

结果会有超过500个条目...

我的问题是，当组件渲染时，它一直在说。Cannot read property 'allContracts' of null

原因是axios函数还没有得到结果... ...

请告诉我怎样才能延迟渲染，等待axios先得到结果，然后继续渲染。