如何解决Reactjs 不更新功能组件中的状态
我正在用 reactS 开发一个简单的应用程序。该应用程序的主要目的是显示一些卡片,在搜索时,卡片将被过滤并显示选择性卡片。我正在分享 App.js 的代码。 我有一个文件名“Robots.js”
import './App.css';
import CardList from './Components/CardList';
import Header from './Components/Header';
import {Robots} from './Components/Robots';
function App() {
const [robots,setRobots] = useState({
robo:Robots,search:''
});
const onSearchChange = (e) =>{
setRobots({...robots,search:e.target.value});
const filteredRobots = robots.robo.filter(item=>{return item.name.toLowerCase().includes(robots.search.toLowerCase())});
//setRobots({...robots,robo:filteredRobots});
console.log(filteredRobots);
}
return (
<div>
<Header onSearchChange={onSearchChange} />
<CardList Robots={robots.robo}/>
</div>
);
}
export default App;
如果我评论
setRobots({...robots,robo:filteredRobots});
控制台上的这一行我可以显示数组正在减少它的项目数量,但使用该行它什么都不做。我认为它应该这样做是有道理的。
我希望我说清楚了。
解决方法
可以一键更新状态,如下图:
const onSearchChange = (e) => {
const filteredRobots = robots.robo.filter(item => {
return item.name.toLowerCase().includes(robots.search.toLowerCase())
});
console.log(filteredRobots);
setRobots({
robo: filteredRobots,search: e.target.value
});
}
由于您只有两个属性,因此您可以使用这些属性创建一个新对象,而实际上并不需要展开运算符。
,setRobots
运行“异步” - 因此,如果您有:
const[data,setData] = setState(5);
const update = (newData) => {
setData(1);
console.log(data) // will print 5
}
并且只有在第二次渲染时它才会打印 1
您可以在此处阅读更多信息:https://reactjs.org/docs/state-and-lifecycle.html
在你的实现中你有一个问题,你没有保存卡片的原始数组
所以先保存原数组
// Here will be the full list of cards.
const [cards,setCards] = useState(allCards);
// Here will be the search by text
const [search,setSearch] = useState("");
// Here will be all the filtered cards
// If you don't know whats useMemo is you can look in here: https://reactjs.org/docs/hooks-reference.html#usememo
const filteredCards = useMemo(()=>{
return cards.filter((card) =>
card.item.toLowerCase().contains(search.toLowerCase()));
},[cards,search])
// on search changed callback
const onSearchChange = (e)=>{setSearch(e.target.value || '')}
// then return your component
return (
<div>
<Header onSearchChange={onSearchChange} />
<CardList Robots={filteredCards}/>
</div>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。