Javascript 反应：未捕获类型错误：无法在Function.keys（<；anonymous>；）将未定义或null转换为对象

我正在尝试处理React组件中的嵌套对象。下面的代码工作正常

在我的DRF视图中，我返回一些数据如下

return Response(serializedResponse.data)

componentDidMount() {
    fetch("api/tryme")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    let matches = this.state.data;
    console.log("allMatches : " + typeof(matches));
    Object.keys(this.state.data).map(k => {
            console.log("Key is : " + k);
            console.log("Value is : " + this.state.data[k]);
          })
    return(
      <Container fluid>
        <strong>Nested object iteration placeholder</strong>
      </Container>
    )
  }
}

并在我的React组件中进行如下处理

return Response(serializedResponse.data)

componentDidMount() {
    fetch("api/tryme")
      .then(response => {
        if (response.status > 400) {
          return this.setState(() => {
            return { placeholder: "Something went wrong!" };
          });
        }
        return response.json();
      })
      .then(data => {
        this.setState(() => {
          return {
            data,
            loaded: true
          };
        });
      });
  }

  render() {
    let matches = this.state.data;
    console.log("allMatches : " + typeof(matches));
    Object.keys(this.state.data).map(k => {
            console.log("Key is : " + k);
            console.log("Value is : " + this.state.data[k]);
          })
    return(
      <Container fluid>
        <strong>Nested object iteration placeholder</strong>
      </Container>
    )
  }
}

但是，如果我更改我的返回语句，以查看以下内容

return Response({"allMatches" : serializedResponse.data})

以及对以下内容的反应代码

  let matches = this.state.data;
    console.log("allMatches : " + typeof(matches));
    Object.keys(this.state.data.allMatches).map(k => {
            console.log("Key is : " + k);
            console.log("Value is : " + this.state.data.allMatches[k]);
          })
    return(
      <Container fluid>
        <strong>Start </strong>
      </Container>
    )

let matches=this.state.data；
log（“allMatches:+typeof（matches））；
Object.keys（this.state.data.allMatches）.map（k=>{
控制台日志（“键为：+k）；
log（“值为：”+this.state.data.allMatches[k]）；
})
返回(
开始
)

---

我的主题行有个错误。我做错了什么？

调试和获得正确解决方案的第一种方法

确保在构造函数中设置状态时如下所示；避免未定义的问题

this.state={data:{}，占位符：'}

之后，查看控制台日志/打印，一旦对象未定义错误消失，并看到数据格式化的新方式，您永远无法分辨，它可以是this.state.data.data

---

这就解决了问题。我的原始数据是一个数组。第二种形式是对象。在这个.setState（）调用中，我将“data:[]”改为“data:{}”，它成功了。很高兴我能帮上忙：）