Question

我正在尝试使用map()并显示json数据，但它会抛出错误，请参阅下面的截图。我正在映射每个JSON对象并使用showslots()函数将其显示出来。

data.js：

const data = {
        "template_type": "slot_picker",
        "selection_color": "#000000",
        "secondary_color": "#808080",
        "title": "Available Slots for Dr. Sumit",
        "available_slots": [
          {
            "date": "Wed, Dec 06",
            "date_slots": [

            ]
          },
          {
            "date": "Thu, Dec 07",
            "date_slots": [

            ]
          },
          {
            "date": "Fri, Dec 08",
            "date_slots": [

            ]
          },
          {
            "date": "Sat, Dec 09",
            "date_slots": [

            ]
          },
          {
            "date": "Today",
            "date_slots": [
              {
                "hour": "8",
                "hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]
              },
              {
                "hour": "3",
                "hour_slots": [
                  {
                    "03:00 PM": "slotId005"
                  },
                  {
                    "03:30 PM": "slotId007"
                  }
                ]
              }
            ]
          },
          {
            "date": "Tomorrow",
            "date_slots": [

            ]
          },
          {
            "date": "Wed, Dec 13",
            "date_slots": [
              {
                "hour": "4",
                "hour_slots": [
                  {
                    "04:30 PM": "slotId105"
                  },
                  {
                    "04:50 PM": "slotId106"
                  }
                ]
              },
              {
                "hour": "5",
                "hour_slots": [
                  {
                    "05:30 PM": "slotId202"
                  },
                  {
                    "05:45 PM": "slotId208"
                  }
                ]
              }
            ]
          }
        ]
      };

 export default data;

在datapicker.js中：

  import React, { Component } from 'react';
import data from './data';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0,
        issubmitted:false
     };
   }

  increment(){
    if(this.state.counter < 6){
      this.setState(prevState => ({counter: prevState.counter + 1}))
    }
  }

  decrement(){
    if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
  }

  formsubmitted(){
    this.setState({
        issubmitted:true
    })
  }

  showslots(){
        if(data.available_slots[this.state.counter].date_slots.length === 0){
            return(
                <p>No slots</p>
                )
        }else {
            return(

                    data.available_slots[this.state.counter].date_slots.map(obj =>{

                        return (
                          <div id="slotinfo">
                           <div> <p>Hour : {obj.hour}</p> </div>
                            <div><p>slot: {obj.hour_slots[0]}</p></div>
                            <div><p>slot: {obj.hour_slots[1]}</p></div>

                          </div>
                        );
                    })
                )
        }

  }

  render() {
    return (
      <div>

        <div id="center">
        <div className="title">
            <p>Pick a Date</p>
        </div>
        <div className="increment">
          <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
        </div>
        <div className="display">
          <input type="text" id="date" value={data.available_slots[this.state.counter].date}/>
        </div>
        <div className="decrement">
          <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
        <div className="status">
          { data.available_slots[this.state.counter].date_slots.length === 0 ? 
          <p>No slots available for today</p> : <p>Slots available for today</p> }
        </div>
        <div className="submit">
          <button type="button" className="btn btn-primary" id="submit" onClick={this.formsubmitted.bind(this)}>Book Slot</button> 
        </div>
      </div>

      <div>
        {this.state.issubmitted ? this.showslots() : ''}
      </div>


      </div>
    );
  }
}

export default DatePicker;

Answer 1

像这样写：

hour_slots.map((el,i) => {
   let key = Object.keys(el)[0];
   return <div key={i}>{key} : {el[key]}</div>
})

完整代码：

data.available_slots[this.state.counter].date_slots.map((obj,j) => {
    return (
        <div id="slotinfo" key={j}>
            <div> <p>Hour : {obj.hour}</p> </div>
            {
                obj.hour_slots.map((el,i) => {
                    let key = Object.keys(el)[0];
                    return <div key={i}>{key} : {el[key]}</div>
                })
            }
        </div>
    );
})

工作代码段

const data = {
    "available_slots": [
        {
            "date": "Today",
            "date_slots": [
              	{
                	"hour": "8",
                	"hour_slots": [
		                {
		                    "08:10 AM": "slotId001"
		                },
		                {
		                    "08:50 AM": "slotId005"
		                }
            		]
        		},
        		{
		            "hour": "3",
		            "hour_slots": [
		                {
		                    "03:00 PM": "slotId005"
		                },
		                {
		                    "03:30 PM": "slotId007"
		                }
		            ]
       			}
    		]
        },
    ]
}

const App = props => {
	return <div>
		{data.available_slots[0].date_slots.map(obj => {
		    return (
		      	<div id="slotinfo">
			       	<div> <p>Hour : {obj.hour}</p> </div>
			        {
			        	obj.hour_slots.map((el,i) => {
			       			let key = Object.keys(el)[0];
			       			return <div key={i}>{key} : {el[key]}</div>
			    		})
			    	}
		      	</div>
		    );
		})}
	</div>
}

ReactDOM.render(<App />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app' />

Answer 2

考虑给定数据，

"hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]

当你说obj.hour_slots[0]时，它会给出一个对象

{ "08:10 AM": "slotId001" }

反应jsx不理解ant无法呈现它。

这就是您收到此类错误的原因。您需要访问单个属性才能显示slotId001。

编辑：

根据以下评论，为了显示"08:10 AM": "slotId001"，

e.g。第一个元素。

`${ Object.keys(obj.hour_slots[0])[0] } : ${data[Object.keys(obj.hour_slots[0])[0]] }`

使用map显示JSON数据时在Reactjs中出错？

2 个答案: