javascript - Reactjs map 和使用API​​的问题，浏览器没有显示任何内容

Question

我在使用 API 时遇到问题，我尝试将 API 联系人上的姓名显示为 网络浏览器

这是我的代码

NewMain

// import logo from './logo.svg';
// import './App.css';
// import List from './listapps/List.js'

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

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json)
      .then(data => this.setState({ items: data.items }))
  }

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

    return (
      <div>
        <ul>{
          items && items.map((item, index) =>
            <li key={index} >{item.name}</li>
          )
        }
        </ul>
      </div>
    );
  }

}

export default App;

如果我删除items&&，我就会变成空白

我收到这个错误

Uncaught TypeError: Cannot read property 'map' of undefined
    at App.render (NewMain.js:25)
    at finishClassComponent (react-dom.development.js:18470)
    at updateClassComponent (react-dom.development.js:18423)
    at beginWork$1 (react-dom.development.js:20186)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at beginWork$$1 (react-dom.development.js:25780)
    at performUnitOfWork (react-dom.development.js:24695)
    at workLoopSync (react-dom.development.js:24671)
    at performSyncWorkOnRoot (react-dom.development.js:24270)
    at react-dom.development.js:12199
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at flushSyncCallbackQueueImpl (react-dom.development.js:12194)
    at flushSyncCallbackQueue (react-dom.development.js:12182)
    at scheduleUpdateOnFiber (react-dom.development.js:23709)
    at Object.enqueueSetState (react-dom.development.js:13994)
    at App.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:325)
    at NewMain.js:15

我想要的是获取数据并将数据填充到<li>中的列表中然后 cjust 重用该列表，以便我可以查看它，但我无法正确理解

那我该如何解决呢？

Answer 1

在您的 componentDidMount 方法中，将 response.json 更改为 response.json()。此外，您收到此错误的原因是 data 响应对象中没有 items 属性，因为它只是一个对象数组。所以，正确的代码应该是:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => this.setState({ items: data }))