我添加了一个搜索输入,但是当我键入一些内容时,下面的代码似乎反复运行:
const { list } = useList()
搜索输入不做任何事情,它只是更新searchValue
状态,甚至没有连接到上面的list
。
我相信每当我更新input的值时,它都会重新呈现dom。
const [searchValue, setSearchValue] = useState()
<Input
value={searchValue}
className="shadow-none"
onChange={(e) => setSearchValue(e.target.value)}
/>
下面是useList
如何钩子:
export default function useList() {
let { data } = useQuery(GET_LIST)
const list = _.cloneDeep(data)?.menuTree?.filter((i) => i.parentId === null) || []
const otherMenus = data?.menuTree || []
return { list, otherMenus }
}
我尝试在一个单独的组件中添加上述searchInput,但它没有帮助!
如何解决此问题?
1条答案
按热度按时间sczxawaw1#
在我看来,react正在按设计的那样工作,任何时候组件的状态发生变化(比如当你调用
setSearchValue
时),react都会再次调用组件函数,以找出新的输出html应该是什么。如果你想让某件事只发生一次(当组件初始化时),你想做的是: