Question

我是新来的响应者，我正在尝试解决问题，我从API获取此数据：

 rows: [
      { id: 212, title: "Task 1", complete: 20 },
      { id: 5454, title: "Task 2", complete: 40 },
      { id: 39172, title: "Task 3", complete: 60 }
    ]

我正在使用componentDidMount来设置状态

this.state = { apiData: this.props.getAllData(),
             data: [] }
componentDidMount(){
   this.state.apiData.then(data => this.setState({ data: data.rows})) }

数据处于state.data中，工作正常。我的问题是如何从api向行数据中的每一行添加索引，像这样的示例，行的长度是动态的，可以是10行或5行：

 rows: [
      { index: 0, id: 212, title: "Task 1", complete: 20 },
      { index: 1, id: 5454, title: "Task 2", complete: 40 },
      { index: 2, id: 39172, title: "Task 3", complete: 60 }
    ]

这可以在componentDidMount（）中完成吗？并将setState设置为数据？

Answer 1

您可以在状态数据值中使用map，并将索引值附加到新属性。

this.state.apiData.then(data => this.setState({ data: data.rows.map((row, index) => ({ index, ...row }))) }))

出于可读性考虑，我还建议在不同的行中这样做。

this.state.apiData.then(result => {
  const data = result.rows.map((row, index) => ({ index, ...row }))
  this.setState({ data })
})

Answer 2

在设置状态之前添加以下内容：

const rows = [
  { id: 212, title: "Task 1", complete: 20 },
  { id: 5454, title: "Task 2", complete: 40 },
  { id: 39172, title: "Task 3", complete: 60 }
]; // replace by your fetched data

let x = 0;
        
for (const i in rows) {
   rows[i].index = x++;
}

console.log(rows);

ComponenetMount将字段添加到数组React

2 个答案: