Question

我正在通过axios接收有效负载，axios是一个对象。在该对象内部，有一个名为“ locations”的数组。对于数组中的每个索引，都有一个具有属性的对象。我试图通过设置状态来遍历此对象，并尝试了很多排列，但似乎无法获取。

这是从axios API调用返回的数据的结构，这是分页的，我认为这使我的头开始迷惑了访问它的方式。

{status: "success", data: {…}}
    data:
        locations: Array(311)
        [0 … 99]
        [100 … 199]
        [200 … 299]
        [300 … 310]
        length: 311
    __proto__: Array(0)
    __proto__: Object

如果我在Chrome工具中展开，则会看到以下内容：

[0 … 99]
    0:
        deviceId: 471
        lat: 37.77335
        lon: -122.3863333
        spotterId: "SPOT-300434063282100"
        timestamp: "2019-06-10T19:35:01.000Z"
        __proto__: Object
    1:
        deviceId: 444
        lat: 37.77345
        lon: -122.38695
        spotterId: "SPOT-0319"
        timestamp: "2019-06-10T05:07:31.000Z"
        __proto__: Object

因此，您可以展开[0 ... 99]条目，然后展开[100-199]，依此类推...

我尝试了以下代码来调用并在react中进行迭代：

  state = { 
    locations: [] 
  };

  async componentDidMount() {

    try {
      const response = await axios({
        method: 'get',
        url: `my API url`,
        headers: {
          'token': token
        }
      })
      .then(res => {
        const locations = res.data;
        console.log(locations);
        this.setState({ locations });
      });

    } catch (e) {
        console.log(e);
        return;
    }
  }

我很好地恢复了数据，但是对其进行迭代只是为了打印出每个属性...。这是另一回事。我在下面试过了。不起作用。只是阴险的地图不是函数错误。我认为我没有通过正确的索引访问数据，或者没有正确地将其置于状态。

render() {

    const { locations } = this.state;

    return (
      <div>
        <ul>
          {locations.map(location => (
            <li key={location.deviceId}>
              {location.deviceId}
              {location.lat}
              {location.lon}
              {location.spotterId}
              {location.timestamp}
            </li>
          ))}
        </ul>
      </div>
    );
  }

期望结果是我要在屏幕上呈现每个对象及其数组中的属性

Answer 1

您需要从response.data解构位置：

state = { 
    locations: [] 
}

async componentDidMount() {

    try {
        const response = await axios({
            method: 'get',
            url: `my API url`,
            headers: {
                'token': token
            }
        })

        const { locations } = response.data
        console.log(locations)

        this.setState({ locations })

    } catch (e) {
        console.log(e)
    }
}

render() {
    // ...
}

Answer 2

如果这是数据形式：

@TestExecutionListeners(mergeMode =
        TestExecutionListeners.MergeMode.MERGE_WITH_DEFAULTS,
        listeners = {ResetDatabaseTestExecutionListener.class}
)
@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
public class CreateOrderIT {

然后按如下所示设置状态：

@DirtiesContext

您正在接收一个对象。在该对象内部，还有另一个称为“数据”的对象，该对象保存一个位置数组。然后，您可以像这样迭代。

{status: "success", data: {…}}
    data:
        locations: Array(311)
        [0 … 99]
        [100 … 199]
        [200 … 299]
        [300 … 310]
        length: 311
    __proto__: Array(0)
    __proto__: Object

如何遍历似乎是分页的嵌套对象数组？

2 个答案: