Next/React：点击Sanity分类无法将分类名存入LocalStorage问题

核心问题分析 #

1. 页面加载即触发6次存储：你在onClick里直接调用了saveCategory(category.category_name)，这会导致组件渲染时（map循环6次分类）就立即执行函数，而非点击时触发。
2. 点击无反应：因为渲染时已经执行完saveCategory，点击事件绑定的是函数执行后的返回值（undefined），所以点击不会触发任何操作。
3. 存储逻辑无效：你定义的selectedCategory是普通数组，每次组件渲染都会重置，而且push({})存入的是空对象，根本没用到传入的分类名称。

修复后的代码 #

import React, { useState, useEffect } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer } from '../components';
import Link from 'next/link';

const gallery = () => {
  const [categoryData, setCategories] = useState(null);

  useEffect(() => {
    client.fetch(
      `*[_type=="category"]{
        _id, // 新增_id作为唯一key
        categoryImage_alt,
        category_image{
          asset->{
            _id,
            url
          }
        },
        category_name,
        contained_sets
      }`
    )
    .then((data) => setCategories(data))
    .catch(err => console.error(err));
  }, []);

  // 重构存储函数，直接接收分类名称并存入localStorage
  const saveCategory = (categoryName) => {
    localStorage.setItem('selectedCategoryName', JSON.stringify(categoryName));
    console.log('已存储分类:', localStorage.getItem('selectedCategoryName'));
  };

  return (
    <div>
      <Header />
      <main className="main-gallery"> 
        <div className="title">
          <div className="title-line-left"></div>
          <h2>categories</h2> 
          <div className="title-line-right"></div>
        </div>
        <div className="categories">
          <ul className="categories-container">
            {categoryData && categoryData.map((category) => (
              <li key={category._id}> {/* 用_id替代index作为key */}
                <Link href="/sets">
                  <img 
                    src={urlFor(category.category_image).auto('format').url()} 
                    alt={category.categoryImage_alt} 
                    onClick={() => saveCategory(category.category_name)} {/* 用箭头函数包裹，点击时才执行 */}
                  />
                </Link>
              </li>
            ))}
          </ul>
        </div>
      </main>
      <Footer />
    </div>
  )
}

export default gallery

关键修复点说明 #

• onClick回调修正：用() => saveCategory(category.category_name)替代直接调用，确保只有点击时才触发函数。
• 存储逻辑优化：直接将传入的分类名称存入localStorage，去掉无效的selectedCategory数组。
• key值优化：用Sanity返回的_id作为列表项key，比index更稳定，避免组件渲染异常。

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