Question

因此，对于该练习，我尝试使用react框架消耗休息点。但是我莫名其妙地出现了这样的错误：

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

在数组上删除映射并在浏览器中调试后，我看到json对象已正确分配给该变量。但是，当对其进行迭代时，我得到了未定义的错误。任何人都知道什么地方可能出问题了吗？

[编辑] 我完全不明白这一点。我确实了解，为什么在您的发布人员之后会引发此错误。但是在阅读您的答案后，我做了这样的事情：

我向state添加了另一个具有默认值为true的变量isLoading。并在获取json后将其设置为false。

fetch('http://localhost:8080/'+ this.props.xx)
        .then(res => res.json())
        .then((data) => {
                    this.setState({fileContent: data, isLoading: false})
    })

在渲染方法中，我确实添加了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>
        )

因此，在获取数据之前应该不可能输入else语句。但是反应就是这样做。并引发错误。

Answer 1

在this.state.fileContent.containers的初始渲染值期间将是未定义的，并且undefined没有map方法

您在map之前添加支票

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

Answer 2

const { fileContent } = this.state
const { containers } = fileContent
const containerName = containers ? containers : []

像提到的其他答案一样，

在初始渲染期间不存在容器。在这里，我针对个人喜好进行了一些解构，但是我只是在说明容器是否存在，然后在其上映射，否则在一个空数组上映射

尝试映射数组时出现错误。 TypeError：无法读取未定义的属性“ map”

2 个答案: