Question

例如，我在下面有此JSON，我需要获取name中的genres。

{
  "adult": false,
  "backdrop_path": "/5qxePyMYDisLe8rJiBYX8HKEyv2.jpg",
  "budget": 178000000,
  "genres": [
    {
      "id": 12,
      "name": "Adventure"
    },
    {
      "id": 28,
      "name": "Action"
    },
    {
      "id": 53,
      "name": "Thriller"
    }
  ],
  "homepage": null
}

但是当我使用map函数时，React返回一个错误：

TypeError：this.state.persons.map不是函数

class Content extends React.Component {
    state = {
        persons: []
    }

    componentDidMount() {
        axios.get(Config.apiUrl + 353081 + Config.apiKey)
            .then(res => {
                const persons = res.data;
                this.setState({ persons });
            })
    }

    render() {
        return (
            <div>
                <Grid>
                    <Grid item xs={9}>
                        <Typography gutterBottom={true}><b>Budget:</b> { this.state.persons.budget }</Typography>
                        <Typography gutterBottom={true}><b>Genres:</b> { this.state.persons.map(person => <li key={person.genres.id}>{person.genres.name}</li>) }</Typography>
                    </Grid>
                </Grid>
            </div>
        );
    }
}

Answer 1

我认为您声明的应该是对象文字{}，而不是[]。此外，res.data返回{..}，而不返回[]。如果它返回一个数组，则this.state.persons.budget应该抛出错误，但不会。证明persons状态不是数组。

state = {
  persons: {
    genres: []
  }
}

然后

<Typography gutterBottom={true}>
  <b>Genres:</b>{" "}
  {this.state.persons.genres.map(genre => <li key={genre.id}>{genre.name}</li>)}
</Typography>;

无法使用地图功能绑定JSON数据

1 个答案: