Question

我是新来的反应者，所以我不确定如何称呼它。结果，我很抱歉以前是否提出过这个问题。我可能想做的是映射数据，但是我不确定该怎么做。

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

上面是我的提取组件。从API获取的数据包括ID，姓氏，名字。但是，我想将id分配为slug，然后将firstname + lastname更改为name

因此，与其在客户端数组中看到此信息，不如

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

我想看到这样的东西：

slug:7
name:"Michael Lawson"

Answer 1

这对您可能有用：

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

Answer 2

这实际上是一个JavaScript问题。

假设您从API调用中收到类似的信息：

g(const int& x)

您可以简单地使用Array。data = [ { id: 7, first_name: 'Michael', last_name: 'Lawson' }, { id: 8, first_name: 'Joshua', last_name: 'Milton' }, ]来创建一个新的数组，如下例所示：

map()

希望获得帮助！

Answer 3

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

Answer 4

如果您想改用 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 });
}

有用的文档：https://reactjs.org/docs/faq-ajax.html

在反应中获取数据

4 个答案: