Javascript 通过Json列表错误运行React

在我的React组件中，我尝试运行Json列表

我收到这个错误： 未捕获类型错误：this.props.options.map不是函数

我的组成部分：

var BookingTimes = class extends React.Component {
                     render() {
                     var options = this.props.testop.map(function (app, index) {
                        return (                     
                           <div>
                              <div>{app.AdvisorName+"-"+app.AppointmentID +"-"+app.AppointmentStart}</div>   
                           </div>   
                        )
                    }.bind(this));

                    return <div>
                      {options}
                    </div>;
                }
            }

有人能看到错误是由什么引起的吗

在fiddler中，我的jsonlist如下所示：

{
    "AdvisorName": "Ole",
    "AvaliabltTime": [
        {
            "AppointmentID": "AAMkADJlMjEyNjFmLTQ3MzItNDFkYy05OGNhLWDVIr7RapkG0++wSr388EQAAAAFWgQAAEA==",
            "AppointmentStart": "2017-05-03"
        },
        {
            "AppointmentID": "U2bLEN/OnmA/wcA4DVIr7RapkG0++wSr388EQAAAAABDQAA4DVIr7RapkG0++wSr388EQAAAAFWggAAEA==",
            "AppointmentStart": "2017-05-03"
        },
        {
            "AppointmentID": "AAMkADJlMjEyNjFmLTQ3MzItNDFkYy05OGNhLWpkG0++wSr388EQAAAAFWhQAAEA==",
            "AppointmentStart": "2017-05-03"
        }
    ]
}

var BookingTimes = class extends React.Component {
                     render() {
                     var options = this.props.appointmentViewModel.map(function (app, index) {
                        return (                     
                           <div>
                              <div>{this.props.advisorName+"-"+app.AppointmentID +"-"+app.AppointmentStart}</div>   
                           </div>   
                        )
                    }.bind(this));

                    return <div>
                      {options}
                    </div>;
                }
            }

---

您可能没有将道具传递给

组件

<BookingTypes testop={testop} />

---

Edit：正如@Priyesh Kumar所指出的，

testop

是一个对象，除了数组之外，您将无法在任何对象上使用

.map

。

从我所看到的，处理

testop

结构时存在问题。如果将变量

testop

作为prop传递，则可以调用

map（）

仅

AppointmentViewModel

，这是一个嵌套属性，因此正确的映射如下所示：

this.props.testop.AdvisorBookingTimeSlots.availabletime.AppointmentViewModel.map（..）

这是一个相当难看的代码，可能是导致某些错误的原因

无法读取未定义的属性

错误

我建议您将组件重组为以下内容：

{
    "AdvisorName": "Ole",
    "AvaliabltTime": [
        {
            "AppointmentID": "AAMkADJlMjEyNjFmLTQ3MzItNDFkYy05OGNhLWDVIr7RapkG0++wSr388EQAAAAFWgQAAEA==",
            "AppointmentStart": "2017-05-03"
        },
        {
            "AppointmentID": "U2bLEN/OnmA/wcA4DVIr7RapkG0++wSr388EQAAAAABDQAA4DVIr7RapkG0++wSr388EQAAAAFWggAAEA==",
            "AppointmentStart": "2017-05-03"
        },
        {
            "AppointmentID": "AAMkADJlMjEyNjFmLTQ3MzItNDFkYy05OGNhLWpkG0++wSr388EQAAAAFWhQAAEA==",
            "AppointmentStart": "2017-05-03"
        }
    ]
}

var BookingTimes = class extends React.Component {
                     render() {
                     var options = this.props.appointmentViewModel.map(function (app, index) {
                        return (                     
                           <div>
                              <div>{this.props.advisorName+"-"+app.AppointmentID +"-"+app.AppointmentStart}</div>   
                           </div>   
                        )
                    }.bind(this));

                    return <div>
                      {options}
                    </div>;
                }
            }

var BookingTimes=class扩展React.Component{
render（）{
var options=this.props.appointmentViewModel.map（函数（应用程序，索引）{
报税表（
{this.props.advisorName+“-”+app.AppointmentID+“-”+app.AppointmentStart}
)
}.约束（这个）；
返回
{options}
;
}
}

你可以像这样实例化你的组件

<BookingTimes 
    appointmentViewModel={testop.AdvisorBookingTimeSlots.AvaliabltTime.AppointmentViewModel}
    advisorName={testop.AdvisorBookingTimeSlots.AdvisorName}
/>

您可以对这个解决方案进行更多的修改来添加null检查，或者考虑使用LoaSuth<代码>获取< /代码>方法来安全地访问嵌套属性。

---

希望这有帮助

是如何使用的？您是否将

testop

作为道具传递？即使你是，那么它也是一个对象，而不是数组。你的“Json数据列表”既不是Json也不是列表——它只是一个普通的JavaScript对象。我已经更新了我的问题。我在FiddleRooooh中的Json数据现在作为道具通过了testop。但是现在我得到了这个错误：uncaughttypeerror:this.props.options.map不是一个函数，因为

testop

是一个对象。JS中的对象没有

.map

功能——只有数组才有。您确定这里要使用的是

.map

？你想达到什么目标？您是否只想对

AppointmentViewModel

的集合进行评分？