React+Tauri应用中组件局部变量异常赋值问题求助

核心原因分析 #

1. 控制台日志的异步显示误导
   console.log打印数组这类引用类型时，显示的是当前内存中的实时值，而非打印瞬间的状态。你看到的strings created时的数组内容，其实是后续Constructs组件修改后的结果，并非初始化时的真实值。

2. 数组引用的意外修改

   • readInputs函数错误初始化strings为[[]]，导致返回的数组默认包含一个空数组，最终输出结构为[[], 处理后的行数组]，不符合预期。
   • Constructs组件中使用let modConstructs = [...constructs]做浅拷贝，modConstructs的元素仍指向原constructs数组的子数组引用。执行construct.unshift/push时，直接修改了原React状态中的子数组，破坏了状态的不可变性，导致后续操作中这些被修改的引用被意外复用。
   • refactorString函数存在bug：replaceAll返回新字符串，原字符串不会被修改，导致逗号未被正确移除。

修复步骤 #

1. 修正readInputs的逻辑 #

export function readInputs(inputString: string): string[][] {
  console.log("inputString: ", inputString);

  // 处理空白输入，过滤空行
  if (inputString.trim() === "") return [];
  const inputs = inputString.split("\n").filter(line => line.trim() !== "");

  console.log("split inputs: ", inputs);

  // 初始化空数组，而非带空数组的二维数组
  const strings: string[][] = [];

  // 用JSON.stringify打印避免引用更新误导
  console.log("strings created: ", JSON.stringify(strings));

  for (const line of inputs) {
    const processed = refactorString(line);
    console.log("modifying strings: ", JSON.stringify(strings), "with", processed);
    strings.push(processed);
    console.log("result: ", JSON.stringify(strings));
  }
  console.log("read inputs: ", JSON.stringify(strings));
  return strings;
}

// 修复replaceAll的赋值问题
function refactorString(inputString: string): string[] {
  console.log("refactoring string: ", inputString);
  const cleanedString = inputString.replaceAll(",", "");
  return cleanedString.split("-");
}

2. 避免修改原React状态数组 #

在Constructs组件中对每个子数组做深拷贝，切断与原状态的引用关联：

export default function Constructs({ constructs }: ConstructsProps) {
  console.log("Construct drawer got: ", constructs, " constructs");
  // 深拷贝每个子数组，避免修改原状态
  const modConstructs = constructs.map(construct => [...construct]);
  console.log("Creating modConstructs: ", modConstructs);
  console.log("Adding linkers to sides...")

  modConstructs.forEach(construct => {
    console.log("adding lin15s")
    construct.unshift("lin15");
    construct.push("lin15");
  })
// ... 剩余代码
}

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