使用 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, ...data.results])

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