我是新手，所以我不知道如何称呼它。因此，如果之前有人问过这个问题，我深表歉意。我可能想做的是映射数据，但我不知道该怎么做。
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 响应很简单，您可以编写自己的函数并将其映射到那里。但是如果有大量数据并且您必须对几乎每个字段进行映射，则可以使用GRAPHQL。创建将进行 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 });
}