尝试将数据mongodb发送到客户端的特定字段data.site.alerts.alert

问题描述

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

import logo from './logo.svg'; 
import './App.css'; 
import React,{ Component } from 'react'; 
import axios from 'axios';
 
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,index) => {
             return <li key={`ui-${index}`}>
               {data._id}
           </li>
         })}
         </ul>

      </div>
    )   } }

*截图以便更好地理解

目前 我通过以下方式从数据中获取 ID：

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

***我想得到什么*** 是进入data.site.alerts.alert（显示警报列）

为此我正在努力

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

但是获取错误映射不能使用未定义的属性。

解决方法

我经常发现即使映射的数据不是未定义的，react 也会抛出错误，所以很多时候你只需要使用一些内联条件，比如 @prasanth 说：

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

或

<ul key={'qw'}>
  {this.state.arraydata ? this.state.arraydata.map((data,alertIndex)=>{
           return <li key={`alert-li-${alertIndex}`}>{alertData.alert}</li> 
         }) : /* say something */;
      </ul>
    </li>
  })}
</ul>

或类似的东西。