Tengo un problema al usar la API, intento mostrar el nombre en los contactos de la API en el navegador web

este es mi código

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 ={amp}gt; response.json) .then(data ={amp}gt; this.setState({ items: data.items })) } render() { const { items } = this.state return ( {amp}lt;div{amp}gt; {amp}lt;ul{amp}gt;{ items {amp}amp;{amp}amp; items.map((item, index) ={amp}gt; {amp}lt;li key={index} {amp}gt;{item.name}{amp}lt;/li{amp}gt; ) } {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; ); } } export default App; 

y me quedo en blanco, si items{amp}amp;{amp}amp;

recibí este 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 

lo que quiero es obtener los datos y completar los datos en la lista en {amp}lt;li{amp}gt; y luego simplemente reutilizar la lista para poder verla, pero no puedo hacerlo bien

Entonces, ¿cómo puedo resolverlo?

En su método componentDidMount , cambie response.json por response.json() . Además, la razón por la que obtiene este error es porque no hay propiedades de items en el objeto de respuesta de data , ya que es solo una matriz de objetos. Entonces, el código correcto debería ser:

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

response.json es una función y debe llamarse de esta manera response.json()

el siguiente es el código correcto

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

Véalo en codesandbox