gpt4 book ai didi

javascript - 根据变量变化渲染功能组件

转载 作者:行者123 更新时间:2023-12-01 01:00:29 26 4
gpt4 key购买 nike

当内部变量发生变化时,我无法让我的组件重新渲染。我正在开发的系统使用功能组件。案例是这样的:

export const myComponent = (props: compPropsType) => {
const myClassNames ....

let objectList= getObjectList(window.location.hash, props.pageTree);

window.addEventListener('hashchange', () => {
console.log('hello');
objectList = getObjectList(window.location.hash, props.pageTree);
});
return (
<>
<header className={headerClassNames}>
<Block className={...}>
...
<myChildComp objList={objectList}>
...
)
};

问题是渲染<myCildComp>当哈希更新时。 ( objectList 是一个字符串数组,用于创建导航工具栏。)

当我单击页面上的链接时,hello写入控制台,因此监听器正在工作,但它不会重新渲染子组件。

最佳答案

react 中的函数组件相当于类组件中的 render() 函数。

因此,在您的情况下,每次重新渲染组件时都会添加一个 eventListener ,这会导致内存泄漏,您应该使用 useEffect 钩子(Hook)来添加它一次,并在组件重新渲染时将其删除/钩子(Hook)被破坏。

你的组件不会重新渲染,因为没有任何东西告诉它。只有当状态或 Prop 发生变化时, react 中的组件才会重新渲染。所以在你的情况下,我认为你需要将 objectList 添加到状态组合中像这样使用 useEffect 钩子(Hook)

export const myComponent = (props: compPropsType) => {
const myClassNames ....
const [objectList, setObjectList] = useState([])

const onHashChanged = () => {
console.log('hello')

let newObjectList = getObjectList(window.location.hash, props.pageTree)
setObjectList(newObjectList)
}

useEffect(() => {
window.addEventListener('hashchange', onHashChanged)
return () => window.removeEventListener('hashchange', onHashChanged)
}, [])
return (
<>
<header className={headerClassNames}>
<Block className={...}>
...
<myChildComp objList={objectList}>
...
)
};

当在 useEffect 中使用空数组作为第二个参数时,它只会被调用一次,相当于 componentDidMount 并且我返回一个回调函数来取消订阅/删除监听器,其工作方式类似于 componentWillUnmount

关于javascript - 根据变量变化渲染功能组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56125221/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com