javascript - 使用 useState React Native 编辑数组

Question

当有人在输入电影标题后单击“加载电影”时，我正在尝试更新一系列电影，但是使用 useState 并执行setFilms(films => [...films, data.results]);（更新数组并将新电影添加到现有的空电影）不起作用。我应该怎么办？这是我的代码：

function HomeScreen({ navigation }) {

        const [films, setFilms] = useState([]);
        let searchedText = "";
        let page = 0;
        let totalPages = 0;

        const searchInputChanged = text => {
            searchedText = text
        }

        const loadFilms = () => {
            if(searchedText.length > 0)
            {

                getFilmsFromApiWithSearchedText(searchedText, page+1).then(data => {
                    page = data.page
                    totalPages = data.total_pages

                    setFilms(films => [...films, data.results]);
                    console.log(films)

                })

            }
        }

        return (
        <View>
            <Text>Home</Text>
            <TextInput placeholder='Film title' onChangeText={(text) => searchInputChanged(text)} />
            <Button title="Load films" onPress={() => loadFilms()} />

        </View>
        );
}

标签： javascriptarraysreactjsreact-hooksuse-state

Answer 1

这样做很简单：

setFilms([...films, ...data.results])

useState钩子的工作方式与this.setState. 这要简单得多。不再需要基于回调的回调prevState。