react中的嵌套JSON解析

我在

fetch（）

现在我需要获取roleDescription并将其呈现，因此我尝试遍历JSON并将roleDescription存储在state中的数组中

以下是为相同目的编写的方法：

getroles(e) {
          fetch('http://xyz', {
            method: 'POST',
            body: JSON.stringify({
              "role_id": this.props.location.state.role_id
            })
          })
          .then((response) => response.json())
            .then((responseJson) => {
              console.log(`response of getroles: `, responseJson)
              if (responseJson.errorCode === '00') {
                this.setState({roleList : JSON.stringify(responseJson.roleList)});
                let temp = [];
                for (var i=0; i < JSON.stringify(responseJson.roleList).length; i++) {
                  temp.push(JSON.stringify(responseJson.roleList[i].roleDescription))
              }
              }
              else {
               alert("Error Fetching roles" + responseJson.errorMsg);
              }

            })
            .catch((error) => {
             console.error(error);
            });
        }

getroles（e）{
取（'http://xyz', {
方法：“POST”，
正文：JSON.stringify({
“角色id”：this.props.location.state.role\u id
})
})
.then（（response）=>response.json（））
.然后（（responseJson）=>{
log（`getroles的响应：`，responseJson）
如果（responseJson.errorCode=='00'）{
this.setState（{roleList:JSON.stringify（responseJson.roleList）}）；
设temp=[]；
for（var i=0；i{
控制台错误（error）；
});
}

但我犯了一个错误

无法读取未定义的属性“roleDescription”

在线

temp.push

---

我是个新手，所以我不太确定我是否有正确的方法。请帮助。

您根本不应该使用

JSON.stringify

方法：

getroles(e) {
    fetch('http://xyz', {
        method: 'POST',
        body: JSON.stringify({
          "role_id": this.props.location.state.role_id
        })
    })
    .then((response) => response.json())
    .then((responseJson) => {
        console.log(`response of getroles: `, responseJson)
        if (responseJson.errorCode === '00') {
            this.setState({roleList : responseJson.roleList});
            let temp = [];
            for (var i = 0; i < responseJson.roleList.length; i++) {
              temp.push(responseJson.roleList[i].roleDescription);
            }
        }
        else {
            alert("Error Fetching roles" + responseJson.errorMsg);
        }
    })
    .catch((error) => {
        console.error(error);
    });
}

渲染选择器时，应具有以下内容：

<select onChange={(event) => alert('Role description for role having id ' + event.value + ' has been selected')}>
    <option value="">Please choose a description</option>
    {this.state.roleList.map((role) => {
         return (
              <option key={role.role_id} value={role.role_id}>
                  {role.roleDescription}
              </option>
         );
    })}
</select>

alert（'已选择id为'+event.value+'的角色的角色描述'）}>
请选择一个描述
{this.state.roleList.map（（角色）=>{
返回(
{role.roleDescription}
);
})}

这是您的函数的外观

getroles(e) {
    fetch('http://xyz', {
        method: 'POST',
        body: JSON.stringify({
          "role_id": this.props.location.state.role_id
        })
    })
    .then(async (response) => {
       const responseJson = await response.json();
       if (responseJson.errorCode === '00') {
          const roleList = responseJson.roleList.map((element) => element.roleDescription);
          this.setState({
             roleList
          });
       } else {
          alert("Error Fetching roles" + responseJson.errorMsg);
       }
    })
      .catch((error) => {
         console.error(error);
    });
}

这里是一个处理从外部源获取的json的工具

或者，如果您愿意，也可以将其与2

一起使用

getroles(e) {
    fetch('http://xyz', {
        method: 'POST',
        body: JSON.stringify({
          "role_id": this.props.location.state.role_id
        })
    })
    .then((response) => response.json())
    .then((response) => {
       if (responseJson.errorCode === '00') {
          const roleList = responseJson.roleList.map((element) => element.roleDescription);
          this.setState({
             roleList
          });
       } else {
          alert("Error Fetching roles" + responseJson.errorMsg);
       }
    })
      .catch((error) => {
         console.error(error);
    });
}

你能说得更清楚些吗？您需要为临时数组中的每个
roleList
推送角色描述？@Sabbin我需要在下拉列表中显示所有角色描述。因此，我试图从JSON中提取RoleDisciption并将其存储在一个数组中。如果Matei下面的响应不适合您，我将使用更简单的方法创建一个小提琴。是的，请。。。这将有助于..删除JSON.stringify。因为它使数组成为一个字符串，并一直运行到它的长度。使用responseJson.roleList.length代替标题我正在获取一个角色列表，我需要在下拉列表中显示描述，并将其映射到下拉列表的HTML组件上。i、 e this.state.roleList.map（/*返回带有值的HTML组件/*）@Matei我在temp[]中得到了角色描述但是如何填充下拉列表呢？请使用template@ChandraniChatterjee刚刚更新了我的答案，向您展示了如何呈现描述我在@Matei的帮助下在我的状态下的temp[]中获得了角色描述，但是如何填充下拉列表？我使用的是
{this.state.temp[0]}/
这将在下拉列表中呈现第一个角色。但是如何将所有角色从state绑定到？应该是
{this.state.temp.map（（element）=>（{element}））}
这是如果您在
状态中设置了
temp
，我已经更正了上面的注释，现在应该可以了。不客气，您可以使用
map
函数来构建
temp
数组，它比
for
的
更干净、更容易阅读
getroles(e) {
    fetch('http://xyz', {
        method: 'POST',
        body: JSON.stringify({
          "role_id": this.props.location.state.role_id
        })
    })
    .then(async (response) => {
       const responseJson = await response.json();
       if (responseJson.errorCode === '00') {
          const roleList = responseJson.roleList.map((element) => element.roleDescription);
          this.setState({
             roleList
          });
       } else {
          alert("Error Fetching roles" + responseJson.errorMsg);
       }
    })
      .catch((error) => {
         console.error(error);
    });
}

getroles(e) {
    fetch('http://xyz', {
        method: 'POST',
        body: JSON.stringify({
          "role_id": this.props.location.state.role_id
        })
    })
    .then((response) => response.json())
    .then((response) => {
       if (responseJson.errorCode === '00') {
          const roleList = responseJson.roleList.map((element) => element.roleDescription);
          this.setState({
             roleList
          });
       } else {
          alert("Error Fetching roles" + responseJson.errorMsg);
       }
    })
      .catch((error) => {
         console.error(error);
    });
}