Question

我收到fetch()的以下回复

{
  "errorCode": "00",
  "errorMsg": "success",
  "roleList": [
    {
      "role_id": 900,
      "roleDescription": "Role_I"
    },
    {
      "role_id": 901,
      "roleDescription": "Role_II"
    }
  ]
}

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

以下是针对同一方法编写的方法：

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);
            });
        }

但我遇到错误

无法读取未定义的属性'roleDescription'

第temp.push行

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

Answer 1

您根本不应该使用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);
    });
}

我想知道为什么查询单个角色会收到角色列表？

此外，如果您决定将temp变量设置为状态，最好同时设置两个变量temp和roleList。

以后的编辑：您无需设置任何临时变量即可用角色描述填充选择器。

getroles(e) {
    fetch('http://xyz', {
        method: 'POST',
        body: JSON.stringify({
          "role_id": this.props.location.state.role_id
        })
    })
    .then((response) => response.json())
    .then((responseJson) => {
        if (responseJson.errorCode === '00') {
            this.setState({roleList : responseJson.roleList});
        }
        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>

Answer 2

这表明您的功能应该看起来

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);
    });
}

这是从外部来源JsFiddle提取的json的有效提琴。

或者您也可以将其与2 then一起使用

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);
    });
}

嵌套JSON解析

2 个答案: