React股票自选列表重渲染异常：索引作key致复选框错误，求替代方案

（非商业用途，仅以品牌为例）

问题场景 #

我正在实现一个简易股票自选列表（watchlist）应用，设置了搜索输入区及下方的搜索结果框用于搜索股票：

• 输入“apple”时，搜索结果显示正常，勾选复选框可成功将其添加至自选列表。
• 但搜索另一支股票如“nvidia”时，结果显示正常，但复选框却被标记为选中状态，而该股票并未在自选列表中。

相关代码 #

SearchResultBox.tsx #

import { APISearchResult } from "../../types/ApiSearchResult";
import SearchResultBoxItem from "../search-result-box-item";
import styles from "./styles.module.scss";

type SearchResultBoxProps = {
  apiSearchResults: APISearchResult | null;
  searchInputRef: React.RefObject<HTMLInputElement>;
  searchText: string;
  searchResultBoxRef: React.RefObject<HTMLDivElement>;
  error: Error | null;
};

const SearchResultBox: React.FC<SearchResultBoxProps> = ({
  apiSearchResults,
  searchInputRef,
  searchText,
  searchResultBoxRef,
  error,
}) => {
  return (
    <div className={styles["search-bar"]}>
      <input
        type="text"
        placeholder="Search..."
        defaultValue={searchText}
        ref={searchInputRef}
      />
      <div className={styles["search-result-box"]} ref={searchResultBoxRef}>
        {error ? (
          <h1>{error.message}</h1>
        ) : (
          apiSearchResults?.ResultSet?.Result.map((result, index) => (
            <SearchResultBoxItem key={index} stock={result} />
          ))
        )}
      </div>
    </div>
  );
};

export default SearchResultBox;

SearchResultBoxItem.tsx #

import { useContext, useEffect, useRef } from "react";
import styles from "./styles.module.scss";
import { WatchlistContext } from "../../contexts/watchlistContext";
import { StockSearchResult } from "../../types/ApiSearchResult";
import { fromEvent } from "rxjs";

type SearchResultBoxItemProps = {
  stock: StockSearchResult;
};

const SearchResultBoxItem: React.FC<SearchResultBoxItemProps> = ({ stock }) => {
  const checkboxRef = useRef<HTMLInputElement | null>(null);
  const context = useContext(WatchlistContext);

  if (!context) {
    return (
      <p>We are having a problem with the watchlist. Please try again later.</p>
    );
  }

  const { addToWatchlist, removeFromWatchlist, watchlist } = context;

  const isChecked = (stock: StockSearchResult) => {
    return watchlist.some((s) => s.symbol === stock.symbol);
  };

  useEffect(() => {
    if (checkboxRef.current) {
      const checkboxObservable$ = fromEvent(checkboxRef.current, "change");
      const checkboxObserver = {
        next: (e: Event) => {
          const target = e.target as HTMLInputElement;
          if (target.checked) {
            addToWatchlist(stock);
          } else {
            removeFromWatchlist(stock);
          }
        },
        error: (err: Error) => console.log(err),
        complete: () => console.log("complete"),
      };

      const checkboxSubscription =
        checkboxObservable$.subscribe(checkboxObserver);

      //clean up when unmount
      return () => checkboxSubscription.unsubscribe();
    }
  }, []);

  return (
    <div className={styles["info-box-item"]}>
      <div className={styles.left}>
        <h4>{stock.name}</h4>
        <p className={styles.silent}>{stock.symbol}</p>
      </div>
      <div className={styles.right}>
        <div className={styles.info}>
          <h4>{stock.exch}</h4>
          <p className={styles.silent}>{stock.type}</p>
        </div>
        <div>
          <input
            type="checkbox"
            id={stock.symbol}
            className={styles.toggle}
            defaultChecked={isChecked(stock)}
            ref={checkboxRef}
          />
        </div>
      </div>
    </div>
  );
};

export default SearchResultBoxItem;

已知问题与疑问 #

我明确知晓问题原因：使用索引作为组件key，当索引相同时，React无法区分不同组件。将key改为stock.symbol可解决问题，但想了解是否有其他设置key的方式，且不破坏现有代码？

可选解决方案 #

除了stock.symbol，还有几种不破坏现有代码的key设置方式：

• 组合字段作为唯一key：如果存在不同交易所同股票代码的情况，可以用${stock.symbol}-${stock.exch}作为key，利用现有数据的股票代码+交易所组合保证唯一性，无需修改数据结构。
• 生成临时唯一ID：如果数据里没有天然唯一字段，可在映射时生成临时UUID，比如浏览器原生的crypto.randomUUID()：

  apiSearchResults?.ResultSet?.Result.map((result) => (
    <SearchResultBoxItem key={crypto.randomUUID()} stock={result} />
  ))
  

  注意：这种方式会导致每次搜索结果渲染时组件都重新挂载，性能略逊于业务唯一标识，但不会破坏现有代码。
• 复用数据中其他唯一字段：如果你的StockSearchResult类型包含id等其他天然唯一属性，直接用该属性作为key即可，逻辑和stock.symbol一致。

另外补充一点：你的SearchResultBoxItem中useEffect的依赖数组为空，会导致闭包问题（比如操作的是初始渲染的旧stock数据），即使改了key，建议把相关依赖加入数组：

useEffect(() => {
  // 现有逻辑不变
}, [stock, addToWatchlist, removeFromWatchlist]);

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