Question

我正在使用JSON占位符对象将对象名称放在每个列表项中。我一直得到“undefined”而不是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>

JavaScript中的React API对象一直说未定义

2 个答案: