我对React比较陌生，我正试图找出转换在axios调用中返回的一些API响应的最佳方法。我知道这个问题很可能存在于其他空间，但我似乎找不到一个答案来清楚地解释我正在尝试做什么。提前感谢任何人谁可以给我一个坚实的领导在这方面，或易于理解的文档。
我正在努力建立一个react-table，我需要一些数据，要显示，但也需要使一些数据转换发生，之前的数据被传递到表。
注意:我不允许编辑服务器，所以我不能在后端进行逻辑调用这是响应。
{
"id": "0e022ed0",
"start_date": "2014-01-17T06:12:47.566+05:00",
"request_date": "2014-01-17T05:46:08.542+06:00",
"end_date": "2014-01-18T02:15:34.721+05:00",
"status": "The system reports success",
"total": 56,
"processed": 56,
"username": "JimJimmerson",
"fullname": "Jim Jimmerson",
"email": "example@gmail.com"
},
我希望我的数据看起来像这样:
{
"id": "0e022ed0",
"start_date": "2014-01-17T06:12:47.566+05:00",
"request_date": "2014-01-17T05:46:08.542+06:00",
"end_date": "2014-01-18T02:15:34.721+05:00",
"progress": {
"total": 56,
"processed": 56,
"status": {
"success": "The system reports success",
"error": "Has start and end date, but not processed",
"inactive": "No start date",
"inProgress": "Has start date, processing hasn't finished"
},
},
"user": {
"username": "JimJimmerson",
"fullname": "Jim Jimmerson",
"email": "example@gmail.com"
}
}
这是我如何获得数据:注意:传递的options只是api-key
const [ data, setData ] = useState([]);
const [ progress, setProgress ] = useState('');
useEffect(() => {
async function getData() {
await axios.get(`${API_URL}${1}`, options)
.then((resp) => {
const data = resp.data.DATA;
console.log('Response after call', data);
setData(data);
setLoadingData(false);
})
}
if(loadingData) {
getData();
}
}, )
我开始看映射对象数组的值，但我认为我有一些困惑，其他人是如何处理这个/我没有一个扎实的理解映射值。
所以我试着写这个助手方法，在数据返回后
const transformedTableData = Object.fromEntries(
Object.entries(data).map(([progress, processed, total]) => [
progress,
{ ...data, progress: [processed, total] }
]),
)
我相信如果我能得到一个可靠的解释，我可以弄清楚其他部分。我很可能用了很多错误的方法
我需要这样做的原因是在react-table我不确定如何合并列值。我想创建一个组件来处理它。我知道您可以将单元格的值作为prop传递给组件，但似乎我只能传递该单元格的值。但不是多个单元格的值
{
Header: 'total',
accessor: 'total',
Cell: ({ cell: {value}}) => <ProgressTracker values={value}/>
},
{
Header: 'processed',
accessor: 'processed',
Cell: ({ cell: {value}})=><ProgressTracker values={value}/>
},
这里有一个Object.entries的快速示例，可能会澄清一些东西:
const data = {
id: "0e022ed0",
start_date: "2014-01-17T06:12:47.566+05:00",
request_date: "2014-01-17T05:46:08.542+06:00",
end_date: "2014-01-18T02:15:34.721+05:00",
status: "The system reports success",
total: 56,
processed: 56,
username: "JimJimmerson",
fullname: "Jim Jimmerson",
email: "example@gmail.com",
};
Object.entries(data).map(([key, value]) => {
console.log(key, value);
// do something with key and value and return
});
这将注销
id 0e022ed0
start_date: "2014-01..."
...
然而，因为你在一天结束时想要的是一个具有不同形状的对象，我不建议在这里使用map。Map允许您更改数组中每个元素的外观，因此如果循环遍历整个数组，则可以修改每个元素的外观。
在这种情况下，我将这样做:
const data = {
id: "0e022ed0",
start_date: "2014-01-17T06:12:47.566+05:00",
request_date: "2014-01-17T05:46:08.542+06:00",
end_date: "2014-01-18T02:15:34.721+05:00",
status: "The system reports success",
total: 56,
processed: 56,
username: "JimJimmerson",
fullname: "Jim Jimmerson",
email: "example@gmail.com",
};
const { total, processed, username, fullname, email, ...rest } = data;
const result = {
...rest,
progress: {
total,
processed,
status: {
// whatever
},
},
user: {
username,
fullname,
email,
},
};