Редактировать массив с помощью useState React Native

Question

Я пытаюсь обновить массив фильмов, когда кто-то нажимает «Загрузить фильмы» после того, как он ввел заголовок mov ie, но использует 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

Когда вы делаете [... фильмы, данные. Результаты], это будет в включите массив результатов, а не значения результатов.

Запустите следующий фрагмент, чтобы увидеть

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.