[英]Edit an array with useState React Native
I am trying to update an array of movies when somebody click on "Load films" after he has entered a movie title, but using useState and doing setFilms(films => [...films, data.results]);
当有人在输入电影标题后单击“加载电影”时,我试图更新一系列电影,但使用 useState 并执行
setFilms(films => [...films, data.results]);
(updating the array and adding new movies to the existing empty one) do not work. (更新数组并将新电影添加到现有的空电影)不起作用。 What should I do?
我应该怎么办? Here is my code:
这是我的代码:
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>
);
}
Simple do this:这样做很简单:
setFilms([...films, ...data.results])
The useState
hook works a little differently to this.setState
. useState
钩子的工作方式与this.setState
略有不同。 It's much simpler.这要简单得多。 No need for a callback based off
prevState
anymore.不再需要基于
prevState
的回调。
Did you try this?你试过这个吗?
setFilms(films => [...films,...data.results]);
Stackblitz: https://stackblitz.com/edit/react-hooks-use-state-4t5sni Stackblitz: https://stackblitz.com/edit/react-hooks-use-state-4t5sni
When you do [...films,data.results] it will in turn insert results array not the values of results.当您执行 [...films,data.results] 时,它将依次插入结果数组而不是结果的值。
Run the following snippet to see运行以下代码段以查看
let arr=[1,2,3]; let arr2=[4,5,6]; console.log([...arr,arr2]);
.as-console-wrapper { max-height: 100%;important: top; 0; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.