Question

所以我试图创建一个简单的数组，列出所有已映射的项目。对于我正在尝试执行的操作，此处所有其他选项似乎非常复杂。

获取我的数据的代码是：

componentDidMount() {
    fetch('http://localhost:9000/api/get/locations')
      .then(res => res.json())
      .then(res => {
        if (res && res.data) {
          this.setState({ apiResponse: [...this.state.apiResponse, ...res.data] })
        }
      });
  }

我可以使用以下代码将其映射到列表中：

getLocations() {
    if (this.state.apiResponse.length <= 0) {
      return <div>Loading...</div>
    } else {
      return this.state.apiResponse.map((val, key) => {
        return <li key={key}> {val.name} </li>
      })
    }
  }

但是，我希望有一个数组，例如“ locations”，以便每个值都映射到数组中的一个项目。

示例（无效的代码）：

const locations = []

setLocations() {
    if (this.state.apiResponse.length <= 0) {
      return <div>Loading...</div>
    } else {
      return this.state.apiResponse.map((val, key) => {
        return locations = [...locations, ...{id: key, value: val.name, isChecked=false}]
      })
    }
  }


# Output:

locations = [
    {id: 1, value: "val1", isChecked=false},
    {id: 2, value: "val2", isChecked=false},
    {id: 3, value: "val3", isChecked=false},
    {id: 4, value: "val4", isChecked=false}
]

有没有一种方法可以简单地做到这一点？或另一种解决方法？

Answer 1

您可以使用这样的地图获取所需的输出，实际上这是地图的基本用法，

setLocations() {
    if (this.state.apiResponse.length <= 0) {
      locations = [];
    } else {
      locations = this.state.apiResponse.map((val, key) => {id: key, value: val.name, isChecked=false});
    }
  }

这将给出如下输出：

locations = [
    {id: 1, value: "val1", isChecked=false},
    {id: 2, value: "val2", isChecked=false},
    {id: 3, value: "val3", isChecked=false},
    {id: 4, value: "val4", isChecked=false}
]

请让我知道是否需要更多信息。

Answer 2

尝试以下方法：

this.state.apiResponse.map((val, key) => {
        return locations = [...locations, ...[{id: key, value: val.name, isChecked=false}]]
})

将反应数据映射到单个数组

2 个答案: