Javascript 在react中获取数据

我是个新手，所以我不知道该怎么称呼它。因此，如果以前有人问过这个问题，我很抱歉。我可能想做的是映射数据，但我不知道如何做

componentDidMount() {
    fetch("https://reqres.in/api/users?page=3")
    .then(data => {return data.json()})
    .then(datum => this.setState({client:datum.data}));
}

上面是我的fetch组件。从API获取的数据包括id、lastname和firstname。但是，我想将id指定为slug，然后将firstname+lastname更改为name

因此，与其在客户机阵列中看到这一点

id:7
first_name:"Michael"
last_name:"Lawson"

我想看看这样的东西：

slug:7
name:"Michael Lawson"

---

这对您很有用：

const list = [
  {
    id: 7,
    first_name: 'Michael',
    last_name: 'Lawson',
  },
];

function dataToState(data) {
  return data.map(item => {
    const { id: slug, first_name, last_name } = item;
    return { slug, name: first_name + ' ' + last_name };
  });
}

console.log(dataToState(list));

---

这实际上是一个JavaScript问题

假设您从API调用接收到类似的内容：

data = [
  { id: 7, first_name: 'Michael', last_name: 'Lawson' },
  { id: 8, first_name: 'Joshua', last_name: 'Milton' },
]

您只需使用数组。

map（）

即可创建一个新数组，如以下示例所示：

componentDidMount() {
  fetch("https://reqres.in/api/users?page=3")
    .then(data => { return data.json() })
    .then(datum => {
      const results = datum.data.map(x => {
        return {
          slug: x.id,
          name: x.first_name + ' ' + x.last_name
        }
      })
      this.setState({ client: result });
    });
}

---

希望这有帮助

如果API响应很简单，您可以编写自己的函数并将其映射到那里。但是如果有大量的数据，你必须绘制你能使用的几乎每个领域的地图。创建将进行API调用和响应的服务的最佳方法是转到graphql（您的架构是在这里编写的），它将返回您映射的值。

如果您想改用async/await：

// data from server in JSON format
{
  "data": [
    { "id": 7,  "first_name": "Michael", "last_name": "Lawson" },
    { "id": 8, "first_name": "Peter", "last_name": "Parker" }
  ] 
}

// fetch on mount
async componentDidMount() {
    const response = await fetch("https://reqres.in/api/users?page=3");
    const json = await response.json();
    const results = json.data.map(el => {
        return {
          slug: el.id,
          name: el.first_name + ' ' + el.last_name
        }
      });
    this.setState({ clients: results });
}

有用的文件：