如何正确更新React中的state记录 点击刷新按钮数据不更新怎么解决

问题原因 #

• 声明useState时缺少状态更新函数，无法主动触发状态变更和组件重渲染
• reloadRec函数定义在组件外部，无法访问组件内部的状态更新方法，拿到的新数据没有写入state
• 原代码中fetchRec().then(projects)写法无效，没有执行更新逻辑
• 直接给useState传入异步函数作为初始值的写法不符合规范，无法拿到正确的接口返回结果

修正后的完整代码 #

// Import goes here
import { useState, useEffect } from 'react'; // 确保引入React的hooks

const fetchRec = async () => {
  const data = await storage.query().where('key', startsWith('Mykeysxxxxx')).getMany();
  return data.results;
};

const App = () => {
  // 补充状态更新函数setProjects
  const [projects, setProjects] = useState([]);

  // 封装统一的数据加载逻辑，内部调用setProjects更新状态
  const loadProjects = async () => {
    const latestProjects = await fetchRec();
    setProjects(latestProjects);
  };

  // 组件初始化时加载一次初始数据
  useEffect(() => {
    loadProjects();
  }, []);

  return (
    <div>
      {/* 渲染前先判断projects是否存在，避免空值报错，同时补充map要求的key属性 */}
      {projects?.map(project => (
        <div key={project.id || project.key}>
          <b>Fullname: {project.fullname}</b>
          <br/>
          <b>Email: {project.email}</b>
        </div>
      ))}

      <Button 
        text="Refresh Records" 
        onClick={loadProjects}
      />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Nancy Moore