Question

当前，我试图将props数据从父级传递到child，并且工作正常，但是当我还在构造函数中从asyncStorage提取字段时（我们称其为brokerName），然后将其存储在props中。 问题来了，我在子元素中获得的道具没有brokerName。

这是父级：

        constructor(props) {
            super(props);
            this.getBrokername();
        }

        getBrokername = async () => {
            const brokerName = await AsyncStorage.getItem('brokerName');
            this.props = { brokerName };
            console.log('brokerName', brokerName);
        }

        render () {

            return (
                <View style={{flex: 1}}>
                    <View style={{ flex: 1 }}>
                        <VehicleDetails parentProps={this.props} />
                    </View>
                </View>
                );
        }

这是孩子：

            export default class VehicleDetails extends React.Component {

                constructor(props) {
                    super(props);
                    console.log('vehicleDetails', this.props); // I m not able to get this.props.brokerName    
                }
            }

任何帮助将不胜感激。谢谢。

Answer 1

这里有几件事。

您永远都不应变异道具，道具是只读的，在这种情况下要使用的是状态you should read this docs section
异步操作是副作用。此时（第16号反应），您在类构造函数或render方法中不应有任何副作用。
您正在执行的操作不起作用，因为您的代码是异步的，这意味着在创建组件时，您会分派一个获取某些数据的请求，但是在您的组件呈现该数据时数据尚未准备好显示，另一个问题来自我的第一点，因为您正在更改道具而不是使用状态反应，因此不知道需要重新渲染，这就是问题的根源。

要解决此问题：

将您的异步请求移至componentDidMount生命周期方法check the lifecycle methods here
在请求准备就绪时设置状态
将状态作为道具注入您的子组件

Answer 2

父母

constructor(props) {
            super(props);
            this.state={
              brokerName:null
            }
            this.getBrokername();
        }

        getBrokername = async () => {
            const brokerName = await AsyncStorage.getItem('brokerName');
            this.setState({brokerName:brokerName})
            console.log('brokerName', brokerName);
        }

        render () {

            return (
                <View style={{flex: 1}}>
                    <View style={{ flex: 1 }}>
                        <VehicleDetails brokerName={this.state.brokerName} 
                  />
                    </View>
                </View>
                );
        }

孩子

export default class VehicleDetails extends React.Component {

                constructor(props) {
                    super(props);
                    console.log('vehicleDetails', this.props);
                }
            }

您可以在道具密钥ex中获取父母的道具：<parent name={名称}/>，因此您可以使用this.props.name来访问名称

Answer 3

在阅读了上面的 Diogo Cunha的答案， Asif vora的示例和 Akash Salunkhe的评论之后，我想到了此解决方案，并且可以正常工作。感谢您的所有帮助。

            constructor(props) {
                super(props);
                this.state={
                    brokerName:null
                }
                console.log('details props', this.props);
            }

            componentDidMount() {
                this.getBrokername();
            }

            getBrokername = async () => {
                const brokerName = await AsyncStorage.getItem('brokerName');
                this.setState({brokerName:brokerName});
                console.log('brokerName', this.state, brokerName);
            }

            render () {

            return (
                <View style={{flex: 1}}>
                    <View style={{ flex: 1 }}>
                        {this.state.brokerName ? <VehicleDetails parentProps={this.props} brokerName={this.state.brokerName} /> : null }
                    </View>
                </View>
            );
        }

对于答案的任何改进，请随时提出您的建议。

如何获取更新的数据作为道具从父母到孩子

3 个答案: