Javascript 尝试映射数组时出错。TypeError:无法读取属性'；地图'；未定义的

因此，在实践中，我尝试使用react框架使用rest point。 但不知怎的，我得到了这样的错误：

TypeError: Cannot read property 'map' of undefined

Json如下所示：

{  
   "name":"sadasd.tx",
   "application":"Word",
   "id":"123",
   "type":"Mixed",
   "containers":[  
      "Variant1",
      "Variant2_sch",
      "Variant5",
      "Variant6",
      "Variant3",
      "Variant4"
   ]
}

class ContainerList extends React.Component{

    constructor(props){
        super(props);
        this.state={fileContent: []};
    }

    componentDidMount(){   
        fetch('http://localhost:8080/'+ this.props.file)
            .then(res => res.json())
            .then((data) => {
                        this.setState({fileContent: data})
        })
    }

    render() {
        const containerNames = this.state.fileContent.containers.map(container => <Container containerName={container} />);

        return (
            <table>
                <tbody>
                    {containerNames}
                </tbody>
            </table>
        )
    }
}

React组件如下所示：

{  
   "name":"sadasd.tx",
   "application":"Word",
   "id":"123",
   "type":"Mixed",
   "containers":[  
      "Variant1",
      "Variant2_sch",
      "Variant5",
      "Variant6",
      "Variant3",
      "Variant4"
   ]
}

class ContainerList extends React.Component{

    constructor(props){
        super(props);
        this.state={fileContent: []};
    }

    componentDidMount(){   
        fetch('http://localhost:8080/'+ this.props.file)
            .then(res => res.json())
            .then((data) => {
                        this.setState({fileContent: data})
        })
    }

    render() {
        const containerNames = this.state.fileContent.containers.map(container => <Container containerName={container} />);

        return (
            <table>
                <tbody>
                    {containerNames}
                </tbody>
            </table>
        )
    }
}

在render方法中，我添加了if语句：

render() {
        let containerNames;

        if(this.state.isLoading){
            containerNames = <h1>Loading</h1>

        }else{
            containerNames = this.state.fileContent.listContainers.map(listContainer => <Container listContainerName={listContainer} />);
        }

        return (
            <table>
                <tbody>

                    {containerNames}
                </tbody>
            </table>
        )

render（）{
让容器名称；
if（此.state.isLoading）{
集装箱名称=装载
}否则{
containerNames=this.state.fileContent.listContainers.map（listContainer=>）；
}
返回(
{containerNames}
)

---

因此，在获取数据之前不可能输入else statemend。但react以某种方式执行此操作。并引发错误。

在

this.state.fileContent.containers的初始渲染值期间将未定义，
未定义
没有
映射
方法

在映射之前添加检查

const containerNames = Array.isArray(this.state.fileContent.containers) && this.state.fileContent.containers.map(

在初始呈现期间，
this.state.fileContent.containers的值将未定义，
未定义
没有
映射
方法

在映射之前添加检查

const containerNames = Array.isArray(this.state.fileContent.containers) && this.state.fileContent.containers.map(

const{fileContent}=this.state
const{containers}=fileContent
const containerName=容器？容器：[]

与前面提到的其他答案一样，容器在初始渲染期间不存在。这里我对个人偏好做了一些描述，但我只是说明如果容器存在，那么映射到它，否则映射到空数组上
const{fileContent}=this.state
const{containers}=fileContent
const containerName=容器？容器：[]

与前面提到的其他答案一样，容器在初始渲染期间不存在。这里我对个人偏好做了一些描述，但我只是说明如果容器存在，那么映射到它，否则映射到空数组上，如果在
获取（）之前调用
render（）
完成，则
fileContent
对象将为空。如果在
fetch（）之前调用
render（）
完成，则
文件内容
对象将为空。您是对的，我添加了此检查。这有助于解决错误。但组件在加载数据后不会重新加载您是对的，我添加了此检查。这有助于解决错误。但组件在加载数据后不会重新加载