Question

当我通过上下文发送角色时，它在更新状态之前呈现（我的意思是在从API获得响应之前）。任何可以帮助我如何通过setState更新API响应后呈现上下文的方法。预先感谢

import React, { Component, createContext } from "react";
import AppContext from './context';
import axios from '../../global/config'
class ContextProvider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      roles: [],
    };
    
  }

 
    getAllroles(){
      axios.get('roles')
      .then(response => {         
            this.setState({roles:response.data.data})        
          })
          .catch(function (error) {
              console.log(error);
          }) 
      }
     

  componentWillMount() {
    this.getAllroles();
  }

  render() {
    return (
        <AppContext.Provider value={{posts: this.state}}>
        {this.props.children}
       </AppContext.Provider>
    );
  }
}

export default ContextProvider;

Answer 1

上下文Provider与异步渲染的任何其他组件没有什么不同。组件应conditionally rendered并具有短路评估。

可以是：

return !!this.state && (
    <AppContext.Provider value={{posts: this.state}}>
    {this.props.children}
   </AppContext.Provider>
);

或者：

return (
    <AppContext.Provider value={{posts: this.state}}>
    {this.state && this.props.children}
   </AppContext.Provider>
);

如何在响应中通过上下文发送数据

1 个答案: