Reactjs 将道具传递到导入组件时出现问题

我有一个“main”组件，它导入另外两个组件，每个组件都包含一个表单，并且我在传递从主组件中的API调用获得的一些值时遇到了问题

这是“主”组件上发生的情况的一个示例，其中有一个导入的表单：

user_id = null;
email = "";

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        this.user_id = response.user_id;
        this.email = response.email;
        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

<UserForm
  email={this.email}
  id={this.user_id}
></UserForm>;

在

UserForm

组件上：

id = null;
email = "";

constructor(props) {
    super(props);
    this.id = props.id;
    this.email = props.email;
    // Doing a console.log here shows both props are empty
    // Trying to use either of them from here on out breaks the page
}

我假设问题与赋值之前的组件渲染有关，但我不能完全确定

为什么导入的表单上没有正确接收道具，我如何确保它们正确接收

编辑2：等待在

componentdiddupdate

上设置道具，但操作方式需要创建和执行

componentdiddupdate

  componentDidUpdate() {
    if (this.props.id) {
      console.log("props are set!");
      this.getData();
    }
  }

  getData() {
    get(`user-data/${this.props.id}`, this.token)
      .then((user) => {
        // This creates and endless loop of updating
        this.setState({
          ...user.data
        });
      })
      .catch((error) => notify.notifyError(error.message));
  }

---

由于这两个值不是由

状态管理的

，因此当值发生变化时，不会触发重新渲染。因此，道具没有获得最新的值。我建议使用state来处理这两个值

constructor(props){
   this.state = {
    user_id = null;
    email = "";
   }
}

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        console.log('response works fine?', response)
        this.setState = {
          user_id = response.user_id;
          email = response.email;
        }

        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

render(){

<UserForm
  email={this.state.email}
  id={this.state.user_id}
></UserForm>;

}

---

在您的主要组件中，您可以这样做

state = {
    email: '',
    user_id: null
}

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        this.setState({
            email: response.email,
            user_id: response.user_id
        })
        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

在你的用户表单中打印你的道具

componentDidUpdate(prevProps){
    console.log('this.props', this.props);
    console.log('prevProps', prevProps)
}

---

我尝试过使用状态，但也遇到了完全相同的问题（导入的组件上的props为空），我认为这可能与它们的异步性质有关，所以我改为使用变量，这就是为什么我没有在OP中使用状态。它应该是

this.props.id

。您可以检查修改后的答案。仍然不起作用，传递硬编码的道具可以正常工作（执行类似于

的操作），但使用从API调用获得的值在另一个组件上返回空值。您可以在设置状态之前使用

控制台.log

测试响应是否正常工作。检查我修改过的答案这确实起到了作用，我只是在

componentdiddupdate

内部调用

getData

时，为了避免无休止的循环，我不得不进行调整，但快速查看文档有助于解决这个问题。多亏了你和@tsecheukfung01，我会选择这个作为答案，因为它最接近最终解决方案。

state = {
    email: '',
    user_id: null
}

componentDidMount() {
    get(`user-data/`, this.token).then((response) => {
        this.setState({
            email: response.email,
            user_id: response.user_id
        })
        // Doing a console.log at this point shows both values are assigned properly
        // And that they exist
    }).catch((error) => notify.notifyError(error.message));
}

componentDidUpdate(prevProps){
    console.log('this.props', this.props);
    console.log('prevProps', prevProps)
}