Question

所以我有一大堆我从API检索的数据。我认为问题是我的组件在从promise接收数据之前调用了renderMarkers函数。

所以我想知道如何在调用renderMarkers函数之前等待完全解析数据的承诺？

class Map extends Component {

componentDidMount() {
  console.log(this.props)
  new google.maps.Map(this.refs.map, {
    zoom: 12,
    center: {
      lat: this.props.route.lat,
      lng: this.props.route.lng
    }
  })
}

componentWillMount() {
  this.props.fetchWells()
}

renderMarkers() {
  return this.props.wells.map((wells) => {
    console.log(wells)
  })
}

render() {
  return (
    <div id="map" ref="map">
      {this.renderMarkers()}
    </div>
  )
 }
} 

function mapStateToProps(state) {
  return { wells: state.wells.all };
}

export default connect(mapStateToProps, { fetchWells })(Map);

Answer 1

您可以执行以下操作来显示 Loader ，直到获取所有信息：

nohup ngrok http 3000 &

Answer 2

在API调用完成之前调用render函数很好。 bool prepare(const QString & query)是一个空数组（初始状态），您只需渲染任何内容。并且在从API接收数据后，您的组件将自动重新渲染，因为更新了props（redux store）。所以我没有看到问题所在。

如果您确实希望在接收API数据之前阻止渲染，请在渲染功能中检查，例如：

wells

Answer 3

所以我有类似的问题，我自己做出反应并找到了解决方案。通过使用异步/等待调用反应下面的代码段请尝试一下。

 import Loader from 'react-loader-spinner'

 constructor(props){
    super(props);
    this.state = {loading : true}
  }
  getdata = async (data) => {
    return await data; 
  }
  getprops  = async (data) =>{
    if (await this.getdata(data)){
      this.setState({loading: false})
    }
  }
  render() {
  var { userInfo , userData} = this.props;
    if(this.state.loading == true){
      this.getprops(this.props.userData);
    } 
    else{
//perform action after getting value in props
    }
    return (
      <div>
      {
           this.state.loading ? 
             <Loader
               type="Puff"
               color="#00BFFF"
               height={100}
               width={100}
             />
           :    
              <MyCustomComponent/> // place your react component here
      }
      </div>
      )
}

Answer 4

对于带有钩子的功能组件：

    function App() {
        
          const [nodes, setNodes] = useState({});
          const [isLoading, setLoading] = useState(true);
        
          useEffect(() => {
            getAllNodes();
          }, []);
        
          const getAllNodes = () => {
            axios.get("http://localhost:5001/").then((response) => {
              setNodes(response.data);
              setLoading(false);
            });
          };
        
        
          if (isLoading) {
            return <div className="App">Loading...</div>;
          }
          return (
            <>
              <Container allNodes={nodes} />
            </>
        
          );
}

在渲染之前等待react-promise解决

4 个答案: