ReactJS：有没有办法渲染在公理中创建的组件？

Question

我想这样做(显然不工作)< br >我可以将结果存储在一个状态中，并在< code>render()方法中呈现组件，但问题是我进行了许多调用，并将有许多res对象。我最终会有许多状态要维护，所以我想在< code>axios调用后只返回一个组件，而不是每次都改变许多状态。这可能吗？< br >

 class InstanceViewer extends React.Component {                                   
    constructor(props) {                                                         
        super(props);                                                                                                            
        this.MyComponent = {}                                                                              
    }                                                                            

    componentWillMount() {                                                       
        getData()                                                      
    }
    getData(){
        axios.get('/myurl/', {})                              
            .then((res) => {                                                     
                this.MyComponent = <h1> res </h1>           
            });                                                 
    }
    // I just put this line there because I don't know the correct way to do this
    render(){return({this.MyComponent})} 
}                                                                          

Answer 1

问题是您的axios调用是异步的，而“this.MyComponent”在返回时是一个空对象。稍后会用响应更新状态，但您已经执行了引用此内容的代码行。MyComponent仍然是空对象。因此，您不会看到任何错误，也不会在DOM元素上看到任何预期的数据。该解决方案是一个三元运算符，仅呈现此结果。如果对象包含预期结果，则返回MyComponent。

Answer 2

你可以这样做。您需要维护一个状态。每当来自 api 的数据到达时，请准备 元素并使用该元素设置状态。

class InstanceViewer extends React.Component {                                   
    constructor(props) {                                                         
        super(props);                                                                                                            
        this.state = {MyComponent: null}                                                                              
    }                                                                            

    componentWillMount() {                                                       
        getData()                                                      
    }
    getData(){
        axios.get('/myurl/', {})                              
            .then((res) => {      
                let elem = <h1>{res}</h1>
                // Set the state with created element. It will rerender the component and this element will be displayed.
                this.setState({MyComponent: elem})             
            });                                                 
    }
    render(){
     return(
      <div>
       // Render the state. Initially it will be null but after api result, it will display the content.
       {this.state.MyComponent}
      </div> 
    )} 
}        

Answer 3

这是可能的，但不推荐。您跳过了渲染生命周期，因此必须在获取数据后强制重新渲染：您可以在不调用setState的情况下强制React组件重新渲染吗？

但是我建议你只将res保持在组件状态：

class InstanceViewer extends React.Component {                                   
constructor(props) {                                                         
    super(props);                                                                                                            
    this.state = {res: ""}                                                                              
}                                                                            

componentWillMount() {                                                       
    getData()                                                      
}
getData(){
    axios.get('/myurl/', {})                              
        .then((res) => {
            this.setState({res})      
        });                                                 
}
render(){return(<h1>{this.state.res}</h1>)}