React Native 钩子，useRef 和 useEffect

Question

我正在尝试将Class 组件转换为具有 React Native 的功能性组件。

我的Search组件让用户搜索电影名称，我正在调用 API 向他展示所有相应的电影。

这是我的 class 组件：

class Search extends React.Component {

    constructor(props) {
        super(props);
        this.searchedText = "";
        this.page = 0
        this.totalPages = 0
        this.state = {
            films: [],
            isLoading: false
        }
    }

    _loadFilms() {
        if (this.searchedText.length > 0) {
            this.setState({ isLoading: true })
            getFilmsFromApiWithSearchedText(this.searchedText, this.page+1).then(data => {
                this.page = data.page
                this.totalPages = data.total_pages
                this.setState({
                    films: [ ...this.state.films, ...data.results ],
                    isLoading: false
                })
            })
        }
    }

    _searchTextInputChanged(text) {
        this.searchedText = text
    }

    _searchFilms() {
        this.page = 0
        this.totalPages = 0
        this.setState({
            films: [],
        }, () => {
            this._loadFilms()
        })
    }

render() {
        return (
            <View style={styles.main_container}>
                <TextInput
                    style={styles.textinput}
                    placeholder='Titre du film'
                    onChangeText={(text) => this._searchTextInputChanged(text)}
                    onSubmitEditing={() => this._searchFilms()}
                />
                <Button title='Rechercher' onPress={() => this._searchFilms()}/>
                <FlatList
                    data={this.state.films}
                    keyExtractor={(item) => item.id.toString()}
                    renderItem={({item}) => <FilmItem film={item}/>}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => {
                        if (this.page < this.totalPages) {
                            this._loadFilms()
                        }
                    }}
                />
            </View>
        )
    }
}
render() {
      return (
            <View>
                <TextInput
                    onChangeText={(text) => this._searchTextInputChanged(text)}
                    onSubmitEditing={() => this._searchFilms()}
                />
                <Button title='Search' onPress={() => this._searchFilms()}/>
                <FlatList
                    data={this.state.films}
                    keyExtractor={(item) => item.id.toString()}
                    renderItem={({item}) => <FilmItem film={item}/>}
                    onEndReachedThreshold={0.5}
                    onEndReached={() => {
                        if (this.page < this.totalPages) {
                            this._loadFilms()
                        }
                    }}
                />
                {this._displayLoading()}
            </View>
        )
    }
}

如何使用钩子翻译以下内容：

• this.page和this.totalPages ？ useRef 是解决方案吗？

• 在_searchFilms()中，当我的电影列表为空时（因为这是一个新搜索），我正在使用setState回调进行新的 API 调用。 但是因为setState是异步的，所以在之后立即执行它是行不通的。 但我找不到用钩子做的方法。

我认为useEffect可以做到这一点，但是：

• 我只想在我的film列表为空时进行此 API 调用，因为我调用_searchFilms()进行新搜索。
• _loadFilms()在用户滚动时被调用以向 FlatList 添加更多电影（用于相同的搜索），因此在这种情况下我无法清除this.films 。

到目前为止，我是这样翻译的：

const Search = () => {
    const [searchText, setSearchText] = useState('');
    const [films, setFilms] = useState([]);
    // handle pagination
    const page = useRef(0);
    const totalPages = useRef(0);
    // handle api fetch
    const [isLoading, setIsLoading] = useState(false);


    const loadFilmsFromApi = () => {
        getFilmsFromApiWithSearchedText(searchText, page + 1).then((data) => {
            page.current = data.page;
            totalPages.current = data.total_pages;
            setFilms(films => [...films, ...data.results]);
            setIsLoading(false);
        })
    };

    const searchFilm = () => {
        if (searchText.length > 0) {
            page.current = 0;
            totalPages.current = 0;
            setFilms([]);
            // HERE MY Films list won't be cleared (setState asynchronous)
            loadFilmsFromApi();

            // after the api call, clear input
            setSearchText('');
        }
    };

    useEffect(() => {
        console.log(page, totalPages, "Film number" + films.length);
    }, [films]);

Answer 1

我认为你走在正确的道路上。 至于totalPages和page ，如果您想在不同的渲染之间保持该值（设置 state 时），将其作为ref是有意义的

 const Search = () => { const [searchText, setSearchText] = useState(''); const [films, setFilms] = useState([]); // handle pagination const page = useRef(0); const totalPages = useRef(0); // handle api fetch const [isLoading, setIsLoading] = useState(false); // This can be invoked by either search or user scroll // When pageNum is undefined, it means it is triggered by search const loadFilmsFromApi = (pageNum) => { console.log("APPEL", 'loadFills'); getFilmsFromApiWithSearchedText(searchText, pageNum? pageNum + 1: 1).then((data) => { page.current = data.page; totalPages.current = data.total_pages; setFilms(films => { if(pageNum) { return [...films, ...data.results]; } else { return [data.results]; } }); setIsLoading(false); }) }; useEffect(() => { if (searchText.length > 0) { page.current = 0; totalPages.current = 0; setFilms([]); loadFilmsFromApi(); // after the api call, clear input setSearchText(''); } }, [searchText, loadFilmsFromApi]); useEffect(() => { console.log(page, totalPages, "Nombre de film " + films.length); }, [films]); return ( < div > Search < /div> ); };

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

不完全清楚你的问题是什么，但听起来你想在向 api 发起查询之前清除电影 state？ 我也不清楚 useRef 在这里的使用 - useRef只是一种获取元素引用的方法，因此以后很容易访问它 - 比如获取对 div 的引用并能够通过myDivRef.current轻松访问它

const = myDivRef = useRef;
...
<div ref={myDivRef}/>

如果是这种情况，那么我只需在 API 调用的返回中设置一次电影的 state。 WRT 给裁判，看起来你这应该只是普通变量，或者你的 function 中可能的 state 项目。

更新：在这里清除目标后，您可以简单地向loadFilmsFromApi添加一个参数以确定您是否应该 append 或覆盖：

const loadFilmsFromApi = (append) => {
    getFilmsFromApiWithSearchedText(searchText, page + 1).then((data) => {
        page.current = data.page;
        totalPages.current = data.total_pages;

        if (append) {
            setFilms({
                films: this.state.films.concat(data.results)
            });
        } else {
            setFilms({
                films: data.results
            });
        }

        setIsLoading(false);
    })
};