[英]Edit an array with useState React Native
当有人在输入电影标题后单击“加载电影”时,我试图更新一系列电影,但使用 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>
);
}
这样做很简单:
setFilms([...films, ...data.results])
useState
钩子的工作方式与this.setState
略有不同。 这要简单得多。 不再需要基于prevState
的回调。
你试过这个吗?
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; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.