[英]React component not rerendering after state change despite using setState()
[英]Table data not rerendering after state change with useEffect and setState
我有一张带过滤器的桌子。 过滤器由select
下拉菜单触发。 我可以在控制台中看到列表已更新,但是,我没有看到屏幕上发生的变化
// where the rows are rendered
const renderAdvisors = map((advisor) => (
<Row advisor={advisor} key={advisor.id} />
));
// HOW I ORIGINALLY GET THE TABLE DATA - IS THE USEMEMO THE PROBLEM?
const sortedAdvisors = useMemo(
() => {
...
...
},
[arrayOrder, advisors]
);
// WHERE I GET MY UPDATED DATA AFTER THE FITLER (I CAN SEE THE NEW LIST IN CONSOLE
const [filtered, setFiltered] = useState("ALL")
// this useeffect causes a rerender so theoretically the new data would be rendered
useEffect(() => {
filteredAdvisors = sortedAdvisors.filter(obj => obj.location ===
filtered.toUpperCase());
console.log('filtered advisors', filteredAdvisors, 'sortedadv', sortedAdvisors)
},[filtered])
// Below is wht changes the filter with usestate
const onChangeFilter = (e) => {
setFiltered(e.value)
}
return (
...
...
// HERES WHERE I SWAP OUT THE LISTS AND AM EXPECTING A RE-RENDER BUT NONE OCCURS
{advisors.length ?
renderAdvisors(filteredAdvisors.length ? filteredAdvisors:sortedAdvisors)
:
<pw-body size="large" color="grey">Please enter a value</pw-body>
}
</tbody>
...
)
解决了。 感谢@Sinan Yaman
我不假思索地使用了常规变量而不是 state,所以更新没有发生。
为了清楚起见,我创建了一个 代码框。 您可以开始输入“a”或“ab”来查看过滤器的工作原理。 这里重要的是将变量存储在您已经解决的 state 中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.