来自 axios 的反应处理程序数组答案

【问题标题】：react handler array from axios来自 axios 的反应处理程序数组
【发布时间】：2020-02-18 03:17:39
【问题描述】：

我如何处理来自 Axios 的值数组并填充卡片从数组中获取值并显示数据

import React, { Component, Suspense } from "react";
import axios from "axios";

import {Card} from "reactstrap";

import { PHP } from "../../constants";

//api url adress server
const api = PHP;
const reqtoken = "Bearer " + localStorage.getItem("token");

class Property extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  load() {
    axios
      .get(api + "api/property", {
        headers: {
          "Content-type": "application/json",
          Authorization: reqtoken
        }
      })

在状态上插入数据数组

      .then(json => {

console.log 在控制台终端显示数据

        console.log(json.data.data.data);
        this.setState({
          data: json.data.data.data
        });
      })
      .catch(erros => {
        console.log(erros);
      });
  }
  componentDidMount() {
    this.load();
  }

  render() {
    return (
      <div>

映射数组以处理结果......

        {this.state.data.map(i => (
          <Card>
            <li>{i.address}</li>
          </Card>
        ))}
      </div>
    );
  }
}
export default Property;

没有让我出现错误的错误控制台

【问题讨论】：

您能否使用从 api 获得的示例响应更新您的问题。

标签： arrays reactjs axios

【解决方案1】：

不知道响应数据是怎么进来的，但是发现代码有问题。您应该传递密钥。

{this.state.data.map(item => (
  <Card key={item.id}>
    <li>{item.address}</li>
  </Card>
))}

https://reactjs.org/docs/lists-and-keys.html#keys

【讨论】：