TypeError：无法读取未定义的属性“地图”

Question

我正在关注 ReactJS AJAX and APIs tutorial。我在 Spring 中编写了一个简单的 API，然后在 http://localhost:8080 处编写了一个 React 组件来使用该 API。 API 目前返回一个包含以下两项的列表：

[
    {brand:"Asus", make:"AAA"},
    {brand:"Acer", make:"BBB"}
]

这是我的组件的样子：

import React from 'react';
import ReactDOM from 'react-dom';

import { environment } from '../environment/environment';

export class ComputerList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: [
        {brand: null, make: null}
      ]
    };
  }

  componentDidMount() {
    fetch("http://localhost:8080/computers")
    .then(res => res.json())
    .then(
      (result) => {
        // correctly displays the results
        console.log(result);
        this.setState({
          isLoaded: true,
          items: result.items
        });
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
  }

  render() {
    const { error, isLoaded, items } = this.state;

    if(error) {
      return(<div>Error: {error.message}</div>);
    }
    else if(!isLoaded) {
      return(<div>Loading...</div>);
    }
    else if(items) {
      console.log(items);
      // error here: cannot read property "map" of undefined
      // because this.state.items is undefined somehow?
      return(
        <ul>
          {items.map(item => (
            <li key={item.make}>{item.brand} {item.make}</li>
          ))}
        </ul>
      );
    }
  }
}

在第 24 行，成功检索并记录了结果。

但是在第 54 行，当我尝试将每个结果映射到 <li> 项目时，TypeError 被抛出，因为 items 不知何故未定义？我通过在第 12 行初始化 items 并在第 48 行检查 items 来跟踪similar question 的答案，但无济于事。

我该如何解决这个问题？

Answer 1

只要这样做。避免渲染中的 if 循环，而是直接使用 && 运算符或三元运算符来管理 if 检查

  return(
    <ul>
      {!isLoaded && <div>Loading...</div>}
       {error && !isLoaded && <div>Error: {error.message}</div>)}
      {!isLoaded && items && items.map(item => (
        <li key={item.make}>{item.brand} {item.make}</li>
      ))}
    </ul>
  );

此外，您在对象中的 make 键最初包含 null 值，因此您不能将其分配为键。相反，您可以做的是尝试从后端为数组中的对象生成唯一 id，或者使用类似下面的东西

 return(
    <ul>
      {items && items.map((item, index) => (
        <li key={"key"+index}>{item.brand} {item.make}</li>
      ))}
    </ul>
  );

请原谅我的打字错误，因为我是用手机回答的

Answer 2

感谢@DacreDenny 的建议:)

第 27 行：items: result.items。此行期望响应包含名为“items”的对象。

但我的 API 只返回一个对象数组。所以我把行改为

第 27 行至：items: result。这会将整个数组保存到state.items。然后可以正确映射和渲染。

Answer 3

这可能是因为 items 的类型不是数组，这就是为什么不会定义 map() 方法的原因。

对于更强大的render() 方法，您可以将else if(items) { 替换为else if(Array.isArray(items)) {，这样可以防止您看到的错误消息：

render() {
    const { error, isLoaded, items } = this.state;

    if(error) {
      return(<div>Error: {error.message}</div>);
    }
    else if(!isLoaded) {
      return(<div>Loading...</div>);
    }
    else if(Array.isArray(items)) { // <-- update here
      console.log(items);
      // error here: cannot read property "map" of undefined
      // because this.state.items is undefined somehow?
      return(
        <ul>
          {items.map(item => (
            <li key={item.make}>{item.brand} {item.make}</li>
          ))}
        </ul>
      );
    }
  }

希望有帮助！