Question

作为回应，我得到json

如何显示每个version？

我收到错误Cannot read property 'map' of undefined

data:
name: "Google Chrome"
versions: Array(7)
0: "1.0.1"
1: "1.0.2"
2: "1.0.3"
3: 1
4: "asas"
5: "dasdasd"
6: "asdasdasdasdasd"

JS

class AppDetail extends Component {
    state = {
        app: []
    }

    componentDidMount() {
        axios.get('/')
        .then(response => this.setState({ app: response.data }))

    render() {
        return (
            <div>


                {this.state.app.versions.map((version) => {
                    return (<p> key={version.???}>{version.???}</a></p>)
                })}

            </div>
        )
    }
}

Answer 1

这是因为初始状态是一个空数组app: []，而当您执行app.versions时，它是未定义的。

将其更改为

state = {
    app: {
       name: '',
       versions: []
    }
}

由于它是一个字符串数组，所以在执行versions.map((version) =>时，version将是字符串，因此您可以渲染它。

这是完整的代码

class AppDetail extends Component {

    state = {
        app: {
           name: '',
           versions: []
        }
    }

    componentDidMount() {
        axios.get('/')
        .then(response => this.setState({ app: response.data }))
    }

    render() {
        return (
            <div>
                {this.state.app.versions.map((version) => {
                    return (<p> key={version}>{version}</a></p>)
                })}
            </div>
        )
    }
}

Answer 2

在您的情况下，app状态没有versions变量。因此，您必须按以下方式更新状态。

    state = {
        app: {
           name: null,
           versions: []
        }
    }

在继续操作之前检查变量会很好。

{this.state.app && Array.isArray(this.state.app.versions) && this.state.app.versions.map((version) => {
     return (<p> key={version.???}>{version.???}</a></p>)
})}

Answer 3

在映射之前，请尝试检查this.state.app.versions是否可用，如下所示：

class AppDetail extends Component {
    state = {
        app: []
    }

    componentDidMount() {
        axios.get('/')
        .then(response => this.setState({ app: response.data }))

    render() {
        return (
            <div>

                {this.state.app.versions && this.state.app.versions.map((version) => {
                    return (<p> key={version.???}>{version.???}</a></p>)
                })}

            </div>
        )
    }
}

迭代时无法读取ReactJS中未定义的属性“ map”

3 个答案: