Question

我试图将一个对象从父类传递给子类。我使用轴发出 GET 请求，在那里获取对象，然后在父类中将请求的响应设置为 this.state.contact。直到一切看起来都很好，如果我 console.log 联系人的状态，它会正确显示。

在控制台输出时，对象如下所示： {first_name: "Test", last_name: "surname", email: "test@hotmail.com", phone_number: "7228732837", slug: "testhotmailcom"} 并且如果我控制台日志 typeof this.state.contact 它打印 Object

在我的子类中，我只是将 this.props.contact 分配给 this.state.data 并控制台将其记录到渲染方法中。但是，控制台会打印 undefined。

如何将这个对象从父类传递到子类？我需要使用道具在子类中设置状态，因为我需要使用这些值呈现表单。

这是两个类：

父类：

import React from 'react';
import axios from "axios";
import UpdateContact from './UpdateContact';

export default class Test extends React.Component {
    state = {
        contact: ''
    };

    componentDidMount() {
        const slug = this.props.match.params.slug
        const url = "http://localhost:3000/api/v1/contacts/" + slug + ".json"

        axios.get(url)
            .then( (resp) => {
                const contact = resp.data.data.attributes
                this.setState({ contact })
            })
            .catch( data => {
                debugger
            })
    }

    render() {
     return(
            <div>
                <UpdateContact contact={this.state.contact}/>
            </div>
        )
    }
}

子类：

import React from 'react';

export default class UpdateContact extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            data: this.props.contact
        }
    }
    render(){
        return(
            <div>
                {console.log(this.state.data)}
            </div>
        )
    }
}

Answer 1

状态初始化仅在组件已安装且 props.contact 尚未定义时运行一次。这就是您在渲染中未定义的原因。

如果你想根据 props 更新你的子组件状态，你需要添加 componentDidUpdate 生命周期方法

  componentDidUpdate(prevProp) {
    if (this.props.contact !== prevProps.contact) {
      this.setState({ data: this.props.contact });
    }
  }

另一件事是，如果您不需要更改 Child 组件中的 this.props.contact，最好直接使用 prop 而不是设置不会在内部更改的状态。

如何将对象从父类传递给子类

1 个答案: