地图和使用 API 的 Reactjs 问题，浏览器没有显示任何内容

Question

I have a problem using API, i try to show the name on API contacts into web browser

this is my code

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;

and i get blank, if i delete items&&

i got this error

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

what i want is to get the data and fill the data into list in <li> and then cjust reusable the list so i can look at it, but i can't get it right

so how can i solve it?

Answer 1

In your componentDidMount method change response.json to response.json() . Also, the reason you are getting this error is because there is no items property in the data response object since it is just an array of objects. So, the right code should be:

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

Answer 2

response.json is a function and needs to be called like this response.json()

following is correct code

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

See it on codesandbox