时间戳

首页 > 解决方案 > 如何将状态值从组件传递到另一个包含参数设置的子组件？

javascript - 如何将状态值从组件传递到另一个包含参数设置的子组件？

问题描述

我有一个基本组件，可以通过 axios 获取用户信息，然后设置用户状态。但是在组件中，我还有另一个嵌套组件，它是一个表单类型的组件，它设置占位符、defaultValue 等。

这是获取数据并设置状态的生命周期方法：

   componentDidMount() {
     axios.get('https://niftyURLforGettingData')
     .then(response => {
       console.log(response.data);
       const users = response.data;
       this.setState({ users });
     })
     .catch(error => {
       console.log(error);
     });
   }

嵌套在这个组件中的是我的表单组件：

<FormInputs
   ncols={["col-md-5", "col-md-3", "col-md-4"]}
   properties={[
    {
     defaultValue: "I NEED VALUE HERE: this.state.users.id",
    }           
/>

如果我只使用： {this.state.users.id} 在组件之外它可以工作......但在表单内部......什么都没有。

我很确定我必须将状态传递给这个组件......但不能完全理解它。

标签： javascriptnode.jsreactjsjsx

解决方案

我很确定它不起作用，因为users当undefined您的组件第一次呈现时。尝试在状态下初始化该变量，执行如下操作：

state = {
 users: {}
}

然后使用后备因为id也undefined会这样做：

<FormInputs
   ncols={["col-md-5", "col-md-3", "col-md-4"]}
   properties={[
    {
     defaultValue: this.state.users.id || "Fallback Value", // this will render "Fallback value" if users.id is undefined
    }           
/>

如果不是这种情况，请分享有关您的情况的更多信息。

推荐阅读