Question

我想做这样的事情（显然不起作用）
我可以将结果存储在一个状态中并让组件在render()方法中呈现，但问题是我正在进行多次调用并且会有很多res对象。我最终会遇到很多状态维护，所以我想在axios次调用之后返回一个组件，而不是每次都改变很多状态。这可能吗？

 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

这是可能的，但不推荐。您跳过渲染生命周期，因此在获取数据后必须强制重新渲染：Can you force a React component to rerender without calling setState?

但我建议你只保留组件状态：

int main(int ac, char *av[])
{
    system("prog1.c");
    system("prog1.asm");

    return 0;
}

Answer 2

如果您想从字符串创建DOM，可以使用Dangerously Set innerHTML attrubute。

反应文件的例子：

<div dangerouslySetInnerHTML={createMarkup()} />

Answer 3

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

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 4

问题是你的axios调用是异步的＆＃34; this.MyComponent＆＃34;返回时是一个空对象。稍后会使用响应更新状态，但是您已经使用对this.MyComponent的引用执行了代码行，同时它仍然是一个空对象。因此，您没有看到任何错误，并且您没有看到您在DOM元素上预期的任何数据。该解决方案是一个三元运算符，只有在对象包含您期望的结果时才会呈现this.MyComponent。

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

4 个答案: