javascript - ReactJS - 类型错误 : Cannot read property 'name' of undefined

Question

我正在从 API 获取数据，并且想在屏幕上显示一些对象(例如“名称”对象)，我收到以下错误:

“类型错误:无法读取未定义的属性“名称””

我已经尝试在 api 请求后显示数据(使用 bool 值)

有谁知道可能是什么问题吗？

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      products: {},
    }
    this.fetchDevices = this.fetchDevices.bind(this);
}

async fetchDevices() {
  const url = 'my url';
  const response = await fetch(url, {method : 'GET', headers : headers});
  const data = await response.json()
  this.setState({products : data.value})
}

componentDidMount() {
  this.fetchDevices();
}

render() {
  return (
    <div>
      {this.state.products ? <p>{this.state.products[0].name}</p> : null}     
    </div>
  )}
}

export default App

{
"value": [
    {
        "urn": null,
        "name": "New_COMEC",
        "description": null,
        "icon": "icon-energy-meter",
        "customIdFormat": null,
        "customIdDisplay": true,
        "customIdRequired": true,
        "serialNumberFormat": null,
        "serialNumberDisplay": true,
        "serialNumberRequired": false,
        ....,
    }
]

Answer 1

您已将产品状态初始化为空对象而不是数组。渲染方法将在您的 fetch 调用之前被调用，因此应用程序会中断。由于您初始化为对象，

{this.state.products ? <p>{this.state.products[0].name}</p> : null}

在初始渲染中为 true，因此当状态当时实际上是一个对象时，它会尝试获取第一个数组元素..

你的代码应该是这样的

class App extends Component {

  constructor(props) {
    super(props)
    this.state = {
      products: [],
    };

和

{Array.isArray(this.state.products) && this.state.products[0] ? <p>{this.state.products[0].name}</p> : null}