Reactjs使用props从子公司中的JSON访问对象属性

可能是的副本，但这并没有帮助我仍然无法定义

但是我一直在学习如何使用我的子组件中的React中的props在下面的JSON响应中获取对象属性的语法，例如：object“releasedata”s“name”

请注意：不是我在堆栈中找到很多答案的数组

JSON:

{
    id: "-559674239450219239",
    key: "TASK-1",
    name: "Hide old Releases",
    projectId: "-5010744238007635986",
    releasedata: {
        releaseId: "508054512004262880",
        name: "prog rel1",
        projectId: null,
        programId: "1",
    },
    done: false,
};

我的代码：

家长：

componentDidMount: function(){
        $.ajax({
            url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
        }).then(function(data) {
             this.setState({data: data});
                      console.log(data);
            }.bind(this))
    },
render: function(){
    return (
            <PbiHeader releaseData={this.state.data.releasedata}  />                
    )
  }
});

componentDidMount:function（）{
$.ajax({
url:“http://localhost:8080/app/restapi/getreleasedata/“+Key+”？访问令牌=“+accesstokenvalue+”“
}).then（功能（数据）{
this.setState（{data:data}）；
控制台日志（数据）；
}.绑定（本）
},
render:function（）{
返回(
)
}
});

子组件：

var PbiHeader = React.createClass({
    render: function () {
        return (
            <tbody>
                <tr>
                    <td>{this.props.releaseData.name}</td> //Here i am getting
                    undefined and i am stuck with syntax to fetch object
                    releaseData's name
                </tr>
            </tbody>
        );
    },
});

var PbiHeader=React.createClass({
渲染：函数（）{
返回(
{this.props.releaseData.name}//我得到了
未定义，我只能使用语法来获取对象
释放数据的名称
);
},
});

---

任何帮助都很好。

您可以使用子组件中的

组件WillReceiveProps

事件来更新其状态（

组件WillReceiveProps（nextProps）

） 当您更新父组件中的子道具时，它会触发

---

---

文档

您可以使用子组件中的

componentwillreceiveprops

事件来更新其状态（

componentwillreceiveprops（nextrops）

） 当您更新父组件中的子道具时，它会触发

---

---

用于渲染对象属性的文档。我在父setstate（）本身中设置了所有属性：

父组件：

componentDidMount: function(){
    return { data: [],
             release: []};          ===> Defined the undefined variable type
    },
    $.ajax({
        url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
    }).then(function(data) {
         this.setState({data: data,
               release:data.releasedata    ===> Assign directly object from JSON to 
                                                local state variable Defined
             });
        }.bind(this))
    },
    render: function(){
    return (
        <PbiHeader pbiRelease={this.state.release.name} />   ==>Attach attribute 
                  mapping inside object properties here "name" here we can add more 
                  than one attribute eg: add release "id" "<PbiHeader pbiRelease={this.state.release.name} 
                  pbiReleaseId={this.state.release.id} .... etc />"
           )
     }
   });

var PbiHeader = React.createClass({
render: function(){
return (
              <tbody>
                <tr>
                  <td>{this.props.pbiRelease}</td> //Here i mapped props to parent 
                                                    attribute name
                </tr>
              </tbody>
        )
     }
   });

componentDidMount:function（）{
返回{数据：[]，
release:[]}；==>定义了未定义的变量类型
},
$.ajax({
url:“http://localhost:8080/app/restapi/getreleasedata/“+Key+”？访问令牌=“+accesstokenvalue+”“
}).then（功能（数据）{
this.setState（{data:data，
release:data.releasedata==>直接将对象从JSON分配到
局部状态变量定义
});
}.绑定（本）
},
render:function（）{
返回(
==>附加属性
映射对象属性中的“名称”在这里我们可以添加更多
多个属性，例如：添加版本“id”
)
}
});

子组件：

componentDidMount: function(){
    return { data: [],
             release: []};          ===> Defined the undefined variable type
    },
    $.ajax({
        url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
    }).then(function(data) {
         this.setState({data: data,
               release:data.releasedata    ===> Assign directly object from JSON to 
                                                local state variable Defined
             });
        }.bind(this))
    },
    render: function(){
    return (
        <PbiHeader pbiRelease={this.state.release.name} />   ==>Attach attribute 
                  mapping inside object properties here "name" here we can add more 
                  than one attribute eg: add release "id" "<PbiHeader pbiRelease={this.state.release.name} 
                  pbiReleaseId={this.state.release.id} .... etc />"
           )
     }
   });

var PbiHeader = React.createClass({
render: function(){
return (
              <tbody>
                <tr>
                  <td>{this.props.pbiRelease}</td> //Here i mapped props to parent 
                                                    attribute name
                </tr>
              </tbody>
        )
     }
   });

var PbiHeader=React.createClass({
render:function（）{
返回(
{this.props.pbiRelease}//这里我将props映射到父级
属性名
)
}
});

---

这就是如何映射到JSON嵌套对象的属性。如果有其他方法，请添加。

以呈现对象属性。我在父setstate（）本身中设置了所有属性：

父组件：

componentDidMount: function(){
    return { data: [],
             release: []};          ===> Defined the undefined variable type
    },
    $.ajax({
        url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
    }).then(function(data) {
         this.setState({data: data,
               release:data.releasedata    ===> Assign directly object from JSON to 
                                                local state variable Defined
             });
        }.bind(this))
    },
    render: function(){
    return (
        <PbiHeader pbiRelease={this.state.release.name} />   ==>Attach attribute 
                  mapping inside object properties here "name" here we can add more 
                  than one attribute eg: add release "id" "<PbiHeader pbiRelease={this.state.release.name} 
                  pbiReleaseId={this.state.release.id} .... etc />"
           )
     }
   });

var PbiHeader = React.createClass({
render: function(){
return (
              <tbody>
                <tr>
                  <td>{this.props.pbiRelease}</td> //Here i mapped props to parent 
                                                    attribute name
                </tr>
              </tbody>
        )
     }
   });

componentDidMount:function（）{
返回{数据：[]，
release:[]}；==>定义了未定义的变量类型
},
$.ajax({
url:“http://localhost:8080/app/restapi/getreleasedata/“+Key+”？访问令牌=“+accesstokenvalue+”“
}).then（功能（数据）{
this.setState（{data:data，
release:data.releasedata==>直接将对象从JSON分配到
局部状态变量定义
});
}.绑定（本）
},
render:function（）{
返回(
==>附加属性
映射对象属性中的“名称”在这里我们可以添加更多
多个属性，例如：添加版本“id”
)
}
});

子组件：

componentDidMount: function(){
    return { data: [],
             release: []};          ===> Defined the undefined variable type
    },
    $.ajax({
        url: "http://localhost:8080/app/restapi/getreleasedata/"+Key+"?access_token="+accesstokenvalue+""
    }).then(function(data) {
         this.setState({data: data,
               release:data.releasedata    ===> Assign directly object from JSON to 
                                                local state variable Defined
             });
        }.bind(this))
    },
    render: function(){
    return (
        <PbiHeader pbiRelease={this.state.release.name} />   ==>Attach attribute 
                  mapping inside object properties here "name" here we can add more 
                  than one attribute eg: add release "id" "<PbiHeader pbiRelease={this.state.release.name} 
                  pbiReleaseId={this.state.release.id} .... etc />"
           )
     }
   });

var PbiHeader = React.createClass({
render: function(){
return (
              <tbody>
                <tr>
                  <td>{this.props.pbiRelease}</td> //Here i mapped props to parent 
                                                    attribute name
                </tr>
              </tbody>
        )
     }
   });

var PbiHeader=React.createClass({
render:function（）{
返回(
{this.props.pbiRelease}//这里我将props映射到父级
属性名
)
}
});

---

这就是如何映射到JSON嵌套对象的属性。如果有任何其他方法，请在父级中添加。

console.log（this.state）并让我知道？我得到了“数据对象{id=“-559674239450219239”，key=“SW-1014”，name=“隐藏旧版本”，更多…”在console上，我使用其他堆栈答案更改了什么语法，我得到了类型错误：this.props.releasedata未定义。在返回之前，只需在子组件中控制台this.props。此外，您正在使用releasedata，因此它应该是this.props.releasedata，而不是this.props.releasedata，这显然是未定义的。控制台输出-->releasedata对象{releaseId=“508054512004262880”，name=“prog rel1”，active=true，more…}console.log（this.state）在父级内部并让我知道？我得到了“数据对象{id=“-559674239450219239”，key=“SW-1014”，name=“隐藏旧版本”，more…}”在console上，我使用其他堆栈答案更改了什么语法，我得到了类型错误：this.props.releasedata未定义。在返回之前，只需在子组件中控制台this.props。此外，您正在使用releasedata，因此它应该是this.props.releasedata，而不是this.props.releasedata，这显然是未定义的。控制台输出-->releasedata对象{releaseId=“508054512004262880”，name=“prog rel1”，active=true，更多…}组件将接收props:function（props）{this.setState（{name:props.releasedata.name}）；console.log（name）；}，==>TypeError:this.props.releasedata未定义您能告诉我必须在componentWillReceiveProps函数com中设置哪些props语法吗