Question

我正在向返回一些电影的Json文件发出Ajax请求。

    state = { movies: [] };

    componentWillMount()
    {
        this.getMovies();
    }

    /*
       Make an ajax call and put the results in the movies array
     */
    getMovies()
    {
        axios.get('https://pastebin.com/raw/FF6Vec6B')
            .then(response => this.setState({ movies: response.data }));
    }



    /*
        Render every movie as a button
     */
    renderMovies()
    {
        const { navigate } = this.props.navigation;

        return this.state.movies.map(movie =>
            <ListItem key={ movie.title }
                title={ movie.title }
                icon={{ name: 'home' }}
                onPress={() =>
                    navigate('Details', { title: movie.title, release: movie.releaseYear })
                }
            />
        );
    }

    render() {
        return(
            <List>
                { this.renderMovies() }
            </List>
        );
    }

我得到的错误如下：this.state.map不是一个函数。这是因为电影仍然是空的。

当我在console.log response.data时，它返回JSON文件中的所有行。所以问题很可能在这一行：

.then(response => this.setState({ movies: response.data }));

有人知道什么是错的吗？

Answer 1

请从typeof response.data登录getMovies()以检查它是否为阵列。

顺便说一句，您应该在render()：

中绑定您的组件

render() {
    return(
        <List>
            { this.renderMovies.bind(this)() }
        </List>
    );
}

这可以解决您的问题。

无论如何，没有理由按照其他答案中的建议使用self，因为您撰写了then(response => ...)而非then(function(response){ ... })。

Answer 2

您将初始状态放在错误的位置。这样做：

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

来自document：

通常，您应该在构造函数中初始化state，然后如果您想要更改它，请致电setState。

Answer 3

按以下方式更新ajax请求：

constructor(props){
  super(props);
  this.getMovies = this.getMovies.bind(this);
}

此外，您可以将构造函数中的函数绑定为：

.php

React Native状态不会改变

3 个答案: