使用 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>

        );

}

Answer 1

你试过这个吗？setFilms(films => [...films,...data.results]);Stackblitz：https ://stackblitz.com/edit/react-hooks-use-state-4t5sni当您执行 [...films,data.results] 时，它将依次插入结果数组而不是结果的值。运行以下代码段以查看let arr=[1,2,3];let arr2=[4,5,6];console.log([...arr,arr2]);.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

这样做很简单：setFilms([...films,&nbsp;...data.results])useState钩子的工作方式与this.setState.&nbsp;这要简单得多。不再需要基于回调的回调prevState。