无法在反应中显示数据但能够在控制台中看到

Question

*****我的代码 *****

export default class App extends Component {


  

  state = {
    arraydata: []   };


  componentDidMount = () => {
    this.getmongodbdata();   }

  getmongodbdata = () => {
    axios.get('http://localhost:8080/fetch').then(res => {
      console.log(res.data,)
      console.log('Data is recieved')
      this.setState({arraydata: res.data})
      
    })
      .catch(() => {
        alert('Sorry, could not able to fetch the data');
      })   }
  


     render() {
    return (
      <div className="Main">
       <header className="App-header">
          
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Future</h1>
       </header> 


       <h1> hello world</h1>

        <ul key={'qw'}>
          {this.state.arraydata.map((data) => {
            <li key={'ui'}>
              {data._id}
            </li>
            console.log(data._id)
          })}
        </ul>

        


      <div className={"blog-"}>
      
      
      
      </div>
      </div>
    )   } }

*我在控制台的输出和反应

只是试图显示此数据但无法显示。

Answer 1

map 应该返回要打印的数组。试试这个

<ul key={'qw'}>
  {this.state.arraydata.map((data, index) => {
    return <li key={`ui-${index}`}>
      {data._id}
    </li>
  })}
</ul>

如何在其中显示其他数据，例如获取警报数组 在里面输入

从帖子中我看到site.alerts 是一个数组。您需要使用相同的方法使用map 进行打印。

例子

<ul key={'qw'}>
  {this.state.arraydata.map((data, index) => {
    return <li key={`ui-${index}`}>
      {data._id}
      <ul key={`alert-ui-${index}`}>
         {data.site.alerts.map((alertData, alertIndex)=>{
           return <li key={`alert-li-${alertIndex}`}>{alertData.alert}</li> 
         });
      </ul>
    </li>
  })}
</ul>