prop传递给组件返回undefined

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

您可以使用条件渲染.
所以基本上,你检查该值是否存在然后渲染组件else返回null /任何其他组件;

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