Вложенный JSON-разбор в реакции

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'of undefined

on line temp.push

Я новичок в реакции, поэтому я не совсем уверен, что у меня правильный подход.Пожалуйста, помогите.

Answer 1

Это показывает, что ваша функция должна выглядеть

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, извлеченным из внешнего источника JsFiddle

или вы можете использовать егос 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);
    });
}

Answer 2

Вам вообще не следует использовать метод 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>