在react中获取数据

Question

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

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

以上是我的提取组件。从API获取的数据包括id、lastname、firstname。但是，我想分配id作为鼻涕虫，然后将firstname lastname更改为name

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

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

我想看到这样的东西：

slug:7
name:"Michael Lawson"

Answer 1

若API响应很简单，那个么您可以编写自己的函数并将其映射到那个里。但是，如果有大量数据，您必须映射几乎所有可以使用GRAPHQL的字段。创建将进行API调用和响应的服务的最佳方法将转到graphql（您的模式是在这里编写的），它将返回您映射的值。

Answer 2

这实际上是一个JavaScript问题。

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

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

您可以简单地使用Array.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 });
    });
}

希望这有帮助！

Answer 3

这对您很有用：

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