钩子函数useState动态刷新列表_usestate钩子-CSDN博客

文章讲述了如何在React应用中使用useState和useEffecthooks来管理列表数据，通过onSearch事件处理用户输入并在搜索后动态添加和渲染数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现原理：主要利用setLists([...lists,params])更新钩子函数的值

export default () =>{
  const [lists,setLists] = useState([])
  // 使用 useEffect 在页面加载时获取数据
  useEffect(() => {
    // 定义一个内部函数用于获取数据
    const fetchData = async () => {
      try {
        const res = await get_keyword({}); // 调用从API获取数据的函数
        setLists(res.data); // 将数据设置到state中
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    // 调用数据获取函数
    fetchData();
  }, []); // 注意依赖项数组为空，表示只在组件挂载时执行


  const onSearch: SearchProps['onSearch'] = async (value, _e, info) => {
    console.log(info?.source, value)
    // const params = {cars_name:value}
    // const res = await cars_rk(params)
    const params = {keyword_name:value}
    await add_keyword(params)
    setLists([...lists,params])
  };

  return (

    <div>
      <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />
      <div style={{display:"flex",overflowX: 'auto',width:"100%"}}>
        {lists && lists.map((item,index)=>{
          console.log("item",item)
          return(
            <ProList
              style={{flex:"0 0 auto",overflowX:"auto",width:"350px",height:"900px"}}
              headerTitle={item.keyword_name}
              metas={{
                title:{
                  dataIndex:"commenter_name"
                },
                avatar:{
                  dataIndex:"avatar_url"
                },
                description:{
                  dataIndex:"content"
                }
              }}
              request={async ()=>{
                const params = {keyword_name:item.keyword_name}
                const res = await get_cars(params)
                return {
                  success:true,
                  data:res.data
                }
              }}
            />
          )
        })}
      </div>
    </div>
  )
}