Javascript REACT 16.3-将道具阵列渲染为贴图（可选）

我正在尝试渲染道具提供的映射数组。问题在于，根据父级的状态，阵列并非始终可用。如果我试图将映射应用到一个不存在的数组，我会得到一个错误（很自然！）。因此，我尝试设置一个默认的空数组来克服错误

如果我设置默认值，我会认为我正在尝试映射对象。出于示例目的，对以下代码进行了简化，但最终结果相同：

export class Parent extends Component {

    constructor(props) {
        super(props);
        this.state = {
            // This array is not always available
            // It's actually a deep property in an object
            // done here for simplicity
            myArray: [{name: 'foo'},{name: 'bar'}],
        };
    }

    render() {
        return (
            <Child myArray={this.state.myArray} />
        );
    }

} 


import React, { Component } from 'react';

export class Child extends Component {

    render() {

        console.log(this.props.myArray); //=> [{...},{...}] Array
        console.log(typeof this.props.myArray); //=> Object (wuh???)

        this.props.myArray.map((item) => console.log(item.name)); //=> 'foo' then 'bar'

        // Supply a default empty array here to avoid mapping an undefined
        const list = this.props.myArray || [];

        list.map((item) => {
            return (
                <li key={item.name}>{item.name}</li>
            );
        });

        return (
            <ul> {list} </ul>
        );
    }

}

导出类父级扩展组件{
建造师（道具）{
超级（道具）；
此.state={
//此阵列并非始终可用
//它实际上是一个对象的深层属性
//为了简单起见在这里完成
myArray:[{name:'foo'}，{name:'bar'}]，
};
}
render（）{
返回(
);
}
} 
从“React”导入React，{Component}；
导出类子扩展组件{
render（）{
console.log（this.props.myArray）；//=>[{…}，{…}]数组
console.log（typeof this.props.myArray）；//=>对象（wuh？？？）
this.props.myArray.map（（item）=>console.log（item.name））；//=>“foo”然后是“bar”
//在此处提供默认的空数组，以避免映射未定义的
const list=this.props.myArray | |[]；
list.map（（项目）=>{
返回(
{item.name}
);
});
返回(
{list}
);
}
}

未捕获错误：对象作为React子对象无效（找到：具有键{name}的对象）。如果要呈现子对象集合，请改用数组

如果我硬编码数组并省略默认的空数组，则不会出现错误：

const list = this.props.myArray.map((item) => {
            return (
                <li key={item.name}>{item.name}</li>
            );
        });

const list=this.props.myArray.map（（项）=>{
返回(
{item.name}
);
});

---

关于如何将映射应用于条件数组，有什么想法吗？

将子组件的默认道具用作空数组：

import React, { Component } from 'react';

export class Child extends Component {
    render() {
        const list = this.props.myArray.map((item) =>(
            <li key={item.name}>{item.name}</li>
        ));

        return (
            <ul> {list} </ul>
        );
    }
}

Child.defaultProps = {
    myArray: []
};

import React，{Component}来自'React'；
导出类子扩展组件{
render（）{
const list=this.props.myArray.map（（项）=>(
{item.name}
));
返回(
{list}
);
}
}
Child.defaultProps={
myArray:[]
};

将子组件的默认道具用作空数组：

import React, { Component } from 'react';

export class Child extends Component {
    render() {
        const list = this.props.myArray.map((item) =>(
            <li key={item.name}>{item.name}</li>
        ));

        return (
            <ul> {list} </ul>
        );
    }
}

Child.defaultProps = {
    myArray: []
};

import React，{Component}来自'React'；
导出类子扩展组件{
render（）{
const list=this.props.myArray.map（（项）=>(
{item.name}
));
返回(
{list}
);
}
}
Child.defaultProps={
myArray:[]
};

.map

返回一个新数组，而不是修改现有数组（无论如何，您不应该这样做，因为道具是只读的）

您可以将

.map

分配给新变量，或者直接在JSX中进行映射：

<ul>{list.map(item => <li key={item.name}>{item.name}</li>)}</ul>

{list.map（item=>
{item.name}
）}

---

您也可以对父组件中与

props.myArray

相对应的初始状态执行

{（this.props.myArray | |[]）.map（…）}

或使用默认的props，或使用

[]

（而不是

null

等）。myArray

.map

返回一个新数组，而不是修改现有数组（无论如何，你不应该这样做，因为道具是只读的）

您可以将

.map

分配给新变量，或者直接在JSX中进行映射：

<ul>{list.map(item => <li key={item.name}>{item.name}</li>)}</ul>

{list.map（item=>
{item.name}
）}

---

您也可以只做

{（this.props.myArray | |[]）.map（…）}

，或者使用默认的props，或者使用

[]

（而不是

null

等）作为与

props.myArray
相对应的父组件的初始状态，只是作为旁注：没有类型“array”在javascript中，数组也只是一个对象。正如旁注：javascript中没有类型“array”。数组也只是一个对象。