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

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

*我在控制台中的输出并做出反应

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

标签： javascriptnode.jsreactjsjsxreactstrap

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>