Question

我觉得这是一个愚蠢的问题，但我找不到答案。目前我处于状态：

this.state = {
      jsonReturnedValue: []
}

我执行获取请求并获取数据数组：

  componentDidMount() {
    fetch('http://127.0.0.1:8000/api/printing/postcards-printing')
      .then(response => response.json())
      .then(json => {
      this.setState({ jsonReturnedValue: [...this.state.jsonReturnedValue, json.printCategory.products] }, () => console.log(this.state));
      });
  }

这会推送从我的提取请求中提取的数组，但会创建以下内容：

jsonReturnedValue
   [0]Array
      [3] Array <--- the array I'm wanting is nested in the original array.

我需要的是

jsonReturnedValue
   [3]Array

我需要我的提取响应不要嵌套在已经建立的数组中。

Answer 1

您是如此亲密：

this.setState({ jsonReturnedValue: [...this.state.jsonReturnedValue, ...json.printCategory.products] }

您想连接这些数组，但是您所做的（没有第二个散布运算符）只是将一个数组添加为另一个数组的项目。

Answer 2

我认为这是两个问题之一。

选项1：[...this.state.jsonReturnedValue, ...json.printCategory.products]请注意第二个索引上的扩展运算符。我想就是这个！

选项2：我们应该看到响应主体的结构，但是可能需要在响应上选择一个较低级别的属性。例如，用json.data.printCategory.products代替json.printCategory.products。

Answer 3

传播要连接的两个数组：

this.setState({
    jsonReturnedValue: [
        ...this.state.jsonReturnedValue,
        ...json.printCategory.products,
    ],
}, () => console.log(this.state));

或使用Array#concat：

this.setState({
    jsonReturnedValue: this.state.jsonReturnedValue
        .concat(json.printCategory.products),
}, () => console.log(this.state));

或者如果您要替换而不是连接：

this.setState({
    jsonReturnedValue: json.printCategory.products,
}, () => console.log(this.state));

从获取请求更新了setState Array

3 个答案: