JavaScript中的React API對象總是說未定義

Question

我正在使用JSON占位符對象將對象名稱放置在每個列表項中。 我一直在獲取“未定義”而不是data.name。

謝謝閱讀！ 這是我的以下代碼供您查看：

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

您忘記將參數傳遞給forEach調用，如果是這樣的話：

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>