React项目中Sanity获取数据的加载显示与过滤异常问题

问题原因 #

1. 初始状态下postData未设置默认值，为undefined，导致data初始值也为undefined
2. Sanity数据是异步获取的，组件挂载时data已完成初始化，后续postData更新不会自动同步到data
3. 点击筛选时postData已获取到数据，调用filterData会将data设置为postData或筛选后的数据，因此能正常展示

修改方案 #

步骤1：给原始数据state设置初始空数组

将postData的初始值设为空数组，避免初始状态为undefined：

const [postData, setPost] = useState([]);

步骤2：初始化筛选后数据state为原始数据的初始值

const [data, setData] = useState(postData);

步骤3：异步获取数据后同步更新筛选后数据

在useEffect的请求回调中，同时更新postData和data，确保页面加载完成后展示全部数据：

useEffect(() => {
  sanityClient.fetch(`*[_type == "post"]{
    title,
    slug,
    style,
    thumbnail{
        asset->{
            url
        },
    },
    images[]{
        asset->{
          _id,
          url
        },
        alt
      },
    "categories": categories[]->title 
  }`)
    .then((fetchedData) => {
      setPost(fetchedData);
      setData(fetchedData); // 同步初始数据到筛选后state
    })
    .catch(console.error);
}, []);

额外优化（可选） #

在filterData函数中增加postData存在性判断，避免因数据未加载完成导致的报错：

const filterData = (value) => {
  if (!postData) return; // 防止postData未初始化时调用filter
  const lowercasedValue = value.toLowerCase().trim();
  if (lowercasedValue === "") setData(postData);
  else {
    const filteredData = postData.filter(item => {
      return Object.keys(item).some(key =>
        excludeColumns.includes(key) ? false : item[key].toString().toLowerCase().includes(lowercasedValue)
      );
    });
    setData(filteredData);
  }
}

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