Question

我有一个异步方法被调用，我需要从它的值在第一个循环中进行渲染，因此它将被传递给正在渲染的下一个组件，而我无法完成id。在返回值之前会渲染组件，这会使prop在传递时变为undefined。知道如何延迟渲染直到返回值吗？

代码示例：

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            valueHere:''
        }
    }


componentWillMount() {
    axios.post(url, {
        username:this.state.username
    })
    .then((res) => {
        this.setState({
            valueHere:res.data
        })
    })
}    


    render() {
        return(
            <AnotherComponent
            someValue={this.state.valueHere}
        />
        )
    }

}


export default class AnotherComponent extends Component {

    constructor(props) {
        super(props);

    }



    render() {
        console.log(this.props.someValue) // undefined
        return(
            <View/>
        )
    }    
}

Answer 1

您可以使用conditional rendering。
因此，基本上，您要检查该值是否存在，然后渲染该组件，否则返回null /任何其他组件；

render() {
return( this.props.someValue? <ActualComponeent /> : <div> some loader...</div>)
}

传递给组件的道具返回未定义

1 个答案: