如何将 axios GET 响应数据保存为 json 或与到达的响应相同答案

【问题标题】：How to save axios GET response data as json or as same as the arrived response如何将 axios GET 响应数据保存为 json 或与到达的响应相同
【发布时间】：2020-06-11 23:55:50
【问题描述】：

export class LoadProfile extends Component {
    state = {
    data: ''
   }

componentDidMount() {
    axios({
        url: 'http://localhost:8080/profile/all',
        method: 'GET',
        responseType: 'json',
      }).then((response) => {
        // here I can iterate all response data.
        response.data.forEach((d) => {
           console.log("d: "+d.displayName)
        });
        // here I am setting sate. Later I can't iterate this data any more 
        this.setState(response.data);
      });

   }
 }

后来在渲染方法时我尝试如下：

this.state.data.forEach((el) => {
    console.log("el: "+el.displayName)
})

我收到 TypeError 错误：this.state.data.forEach 不是函数

在这种情况下，它是 JSON 格式。如何保存来自服务器的响应或保存在 JSON 对象中以便以后进行迭代？

完整代码的更新问题：-

export class LoadProfile extends Component {

state = {
    data: ''
}

componentDidMount() {
    axios({
        url: 'http://localhost:8080//profile/all',
        method: 'GET',
        responseType: 'json',
      }).then((response) => {

        this.setState({data: response.data});

        response.data.forEach((d) => {
           console.log("d: "+d.displayName)
        });
        // this is fine
        this.state.data.forEach((e) => {
           console.log("e: "+e.displayName) 
        });
      });
}

render() {
    return (
    <Table singleLine>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Id</Table.HeaderCell>
        <Table.HeaderCell>Fullname</Table.HeaderCell>
        <Table.HeaderCell>Birth Date</Table.HeaderCell>
        <Table.HeaderCell>Gender</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
       // Here error: TypeError: this.state.data.forEach is not a function
      {this.state.data.forEach((el) => {
        return (
          <Table.Row key={el.id}>
            <Table.Cell>{el.id}</Table.Cell>
            <Table.Cell>
              {el.displayName}
            </Table.Cell>
            <Table.Cell>{el.birthDate}</Table.Cell>
            <Table.Cell>{el.gender}</Table.Cell>
          </Table.Row>
        );
      })
      }
    </Table.Body> 
  </Table>

    )
}
 }

 export default LoadProfile

所以我只能在 axios 响应方法中进行迭代。但我不能在渲染方法中迭代。怎么了？

【问题讨论】：

data 的默认值是一个空字符串，如果它是一个数组，这没有多大意义。您可以使用空数组作为默认值 state = { data: [[] } 或仅使用 null 并在使用前检查 this.state.data && this.state.data.map(/**/)。

标签： json reactjs axios

【解决方案1】：

你忘记了状态键：

 this.setState({ data: response.data });

还应该将初始状态设置为空数组，以便初始渲染可以找到map函数（使用map，而不是forEach，forEach不会对返回值做任何事情）：

  state = {
    data: []
   }

this.state.data.map((el) => {
        return (
          <Table.Row key={el.id}>
            <Table.Cell>{el.id}</Table.Cell>
            <Table.Cell>
              {el.displayName}
            </Table.Cell>
            <Table.Cell>{el.birthDate}</Table.Cell>
            <Table.Cell>{el.gender}</Table.Cell>
          </Table.Row>
        );
      })

【讨论】：

【解决方案2】：

改为这样做

this.setState({data: response.data});

【讨论】：

虽然这段代码可能会回答这个问题，但您是否可以考虑添加一些解释来说明您解决了什么问题，以及您是如何解决的？这将有助于未来的读者更好地理解您的答案并从中学习。