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>
        );
}

Answer 1

这样做很简单：

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

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

Answer 2

你试过这个吗？

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; }