JavaScriptのReact APIオブジェクトが未定義のままになる

Question

JSONプレースホルダオブジェクトを使用して各リストアイテムにオブジェクト名を配置しています。私はdata.nameの代わりに "undefined"を得続けます。

読んでいただきありがとうございます！あなたが見するここに私のコードは以下の通りです：

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 1

あなたは、このようにする必要があります場合は、あなたのforEach呼び出しに引数を渡すのを忘れていました。 name}} js関数内で.. document.getElementById（ 'datalog'）のようになります。innerHTML + = <ul> <li>'+data.name+' </li> </ul>

Answer 2

あなたは$ {データを使用しカント：

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') 
)