Question

我正在做出反应的第一步，我正在努力解决错误信息：

this.state.items.map不是函数

我已经知道map只是数组的成员而不是对象的成员。在我的App-class的构造函数中，我将items []显式初始化为数组。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class HelloComponent extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

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

  componentDidMount() {
    fetch(`http://example.com/api`)
      .then(result => {
        this.setState({ items: result.json() });
      }
      );
  }

  render() {
    var listItems = this.state.items.map(item => <HelloComponent name={item.name} />); // crash!!!

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.

        {listItems}

        </p>
      </div>
    );
  }
}

export default App;

我不知道会发生什么。我怀疑对result.json（）的调用可能会使用promise覆盖我的数组，但我不知道如何正确实现它。

Answer 1

我认为你的json响应是覆盖常规数组的响应，你应该只从json promise中设置setState：

fetch(`http://example.com/api`)
  .then(result => {
    result.json().then(json => this.setState({ items: json }))
  }
);

或者，如果你可以支持async / await，你可以等待结果：

fetch(`http://example.com/api`)
  .then(result => {
    this.setState({ items: await result.json() })
  }
);

Answer 2

我建议你实现目标

{
    "presets": [
        "react",
        [
            "env",
            {
                "debug": true,
                "modules": "commonjs",
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "safari >= 7"
                    ],
                }
            }
        ],
    ],
    "plugins": [
        "transform-object-rest-spread",
        "transform-es2015-arrow-functions",
        "transform-class-properties"
    ]
}

反应：地图不是一个功能

2 个答案: