Question

react js 无法读取未定义的属性“map”

2020-12-08

37

reactjs

我是 reactjs 的初学者。我在高阶组件中收到 map 错误。当我尝试 console.log(items) 时，项目显示在控制台日志中，但项目未在模板中呈现，有人能告诉我如何解决错误 TypeError: 无法读取未定义的属性“map”

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: []
        };
    }

    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/todos/")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        items: result.items
                    });
                }
            )
    }

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

        return (
            <ul>
                {items.map(item => (
                    <li key={item.id}>
                        {item.name} {item.price}
                    </li>
                ))}
            </ul>
        );

    }
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement)

Answer 1

查看端点的有效负载。它看起来像：

[
  {
    "userId": 1,
    "id": 1,
    "title": "delectus aut autem",
    "completed": false
  },
  {
    "userId": 1,
    "id": 2,
    "title": "quis ut nam facilis et officia qui",
    "completed": false
  },
  // ...

result 参数是一个普通数组；它不是具有 items 属性的对象。使用：

this.setState({
  items: result
});

这些项目也没有 price 属性。选择 userId 、 id 、 title 或 completed 。

Answer 2

来自 https://jsonplaceholder.typicode.com/todos/ 的响应已返回一个数组，因此您只需进行以下更改：

componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/todos/")
            .then(res => res.json())
            .then(
                (result) => {
                    this.setState({
                        items: result // just return result               
                    });
                }
            )
    }

Answer 3

我很确定在这段代码中：

 this.setState({ items: result.items});

result.items 不是数组或者您期望的数组，我建议记录 result 并检查它是否是一个数组