JavaScript中的React API对象总是说未定义

Question

I am using a JSON placeholder object to place the object name in each list item. I keep getting "undefined" instead of the data.name.

Thanks for reading! Here is my code below for you to look at:

console.clear()

class App extends React.Component {

searchFunction() {
fetch('http://jsonplaceholder.typicode.com/posts/1/comments', {
  method: 'GET'
}).then((res) => {
res.json().then((data) => {
  console.log(data);
  data.forEach(function() 
   {document.getElementById('datalog').innerHTML+=
    `<ul>
      <li>
        ${data.name}
      </li>
     </ul>`
  });
})
})
    .catch((err) => {
      console.log(err);
  })
}
  render() {
return (
  <div className='App'>
    <h1>Welcome to VCP!</h1>
    <div id="datalog"></div>
    {this.searchFunction()}
  </div>
    )
  }
}


ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

Answer 1

you forgot to pass in an argument to your forEach call, if should be like this:

console.clear()

class App extends React.Component {

  searchFunction() {
    fetch('http://jsonplaceholder.typicode.com/posts/1/comments', {
      method: 'GET'
    }).then((res) => {
    res.json().then((data) => {
      console.log(data);
      data.forEach(function(item){document.getElementById('datalog').innerHTML+=
        `<ul>
          <li>
            ${item.name}
          </li>
         </ul>`
      });
    })
  })
        .catch((err) => {
          console.log(err);
      })
}
  render() {
    return (
      <div className='App'>
        <h1>Welcome to VCP!</h1>
        <div id="datalog"></div>
        {this.searchFunction()}
      </div>
    )
  }
}


ReactDOM.render(
  <App/>,
  document.getElementById('root')
)

Answer 2

您不能在js函数中使用$ {data.name}。它应该类似于document.getElementById（'datalog'）。innerHTML + = <ul> <li>'+data.name+' </li> </ul>