javascript - 传递给组件的 prop 返回未定义

Question

我有一个异步方法被调用，我需要在第一个周期渲染它的值，这样它将被传递到下一个正在渲染的组件，但我无法完成 id 。组件在返回值之前渲染，这导致 prop 在传递时未定义。知道如何延迟渲染直到返回值吗？

代码示例:

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>)
}