本文旨在解决 React 应用中，父组件向子组件传递参数后，子组件未能根据新的参数值及时更新数据的问题。通过分析问题代码，我们将定位到表单提交导致的页面刷新是罪魁祸首，并提供使用 e.preventDefault() 阻止默认行为的解决方案，确保组件能够正确响应参数变化并刷新数据。
在 React 应用开发中，父子组件之间的数据传递是常见的模式。然而，有时我们可能会遇到这样的问题：父组件传递给子组件的参数发生了变化，但子组件并没有根据新的参数值重新渲染或获取数据。这会导致 UI 显示的数据与预期不符，影响用户体验。
下面我们通过一个实际案例来分析这个问题，并提供解决方案。
问题描述
一个应用包含一个搜索栏（Navbar）和一个数据表格（AttacksGrid）。用户在搜索栏中输入关键词，点击搜索按钮后，关键词会被传递给 AttacksGrid 组件，AttacksGrid 组件会根据关键词从后端获取数据并显示在表格中。
然而，实际情况是，每次点击搜索按钮后，AttacksGrid 组件都会显示空数据，或者显示初始状态的数据，并没有根据新的关键词进行数据刷新。
代码分析
以下是相关组件的代码：
App 组件：
function App() { const [query, setQuery] = useState(""); const searchClicked = (keyword) => { console.log(`setting query to: ${keyword}`); setQuery(keyword); // for now we want to search for the keyword in the name and description, platform is not supported yet }; return ( ; );}
AttacksGrid 组件：
function AttacksGrid({ query }) { console.log(`QUERY IS ${query}`); useEffect(() => { fetch(`http://127.0.0.1:9000/attacks?name=${query}&description=${query}`) .then((response) => response.json()) .then((data) => { console.log(data); setAttacks(data); }) .catch((err) => console.log(err)); }, [query]); const [attacks, setAttacks] = useState([]); return ( | Name | Description | Platforms | Detection | Phase |
|---|---|---|---|---|
| {attack.NAME} | {attack.DESCRIPTION} | {attack.X_MITRE_PLATFORMS} | {attack.X_MITRE_DETECTION} | {attack.PHASE_NAME} |
Navbar 组件：
function Navbar({ onSearchClicked }) { const [message, setMessage] = useState(""); const handleChange = (event) => { setMessage(event.target.value); console.log(message); }; return ( );}
通过观察代码，我们发现 AttacksGrid 组件的 useEffect 依赖于 query 变量，当 query 发生变化时，useEffect 应该重新执行，从而从后端获取新的数据。
问题出在 Navbar 组件中的表单提交。当点击搜索按钮时，由于 button 的 type 属性为 submit，表单会默认提交，导致页面刷新。页面刷新后，App 组件的状态会被重置，query 重新变为空字符串，因此 AttacksGrid 组件总是显示初始状态的数据。
解决方案
要解决这个问题，我们需要阻止表单的默认提交行为。可以使用 e.preventDefault() 方法来实现。
修改 Navbar 组件中的 button 的 onClick 事件处理函数：
通过在 onClick 事件处理函数中调用 e.preventDefault()，我们可以阻止表单的默认提交行为，从而避免页面刷新。
完整代码
以下是修改后的 Navbar 组件的完整代码：
function Navbar({ onSearchClicked }) { const [message, setMessage] = useState(""); const handleChange = (event) => { setMessage(event.target.value); console.log(message); }; return ( );}
总结
在 React 应用中，如果子组件未能根据父组件传递的参数及时更新数据，需要检查以下几点：
父组件是否正确地更新了状态。子组件的 useEffect 是否正确地依赖于父组件传递的参数。是否存在表单提交或其他导致页面刷新的操作。
通过使用 e.preventDefault() 阻止表单的默认提交行为，我们可以避免页面刷新，确保组件能够正确响应参数变化并刷新数据.
以上就是React 组件参数未更新导致数据未刷新问题的解决方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1527621.html
微信扫一扫 
支付宝扫一扫 
