React中如何在onClick的三元状态更新函数内执行多段逻辑？

先直接给你明确结论：你不能在三元运算符的分支里直接执行多段独立的副作用操作——三元运算符的本质是一个表达式，它的作用是返回一个值，而不是用来执行一系列状态更新这类副作用。你当前的写法存在多个问题，咱们一步步说清楚：

你的代码存在的核心问题 #

1. 三元分支的逻辑错误：
   你用逗号运算符把多个语句凑在一起，但三元运算符只会把分支里最后一个表达式的结果作为返回值。比如你移除分支里最后一句是choosebyprops.setJsonList(...)，而setState函数没有返回值（返回undefined），这会导致setChoiceOrder把choiceOrder设置成undefined，完全不符合你的预期。

2. 直接修改原状态数组：
   你用了jsonList.splice(choiceIndex)，但splice是直接修改原数组的方法，React要求状态更新必须是不可变的，直接修改原状态会导致React无法正确识别状态变化，进而不触发重渲染。

3. 作用域问题：
   choiceIndex = choiceOrder.findIndex(...)没有用let或const声明，会变成全局变量，后续多次点击会导致变量污染，出现莫名其妙的bug。

正确的写法：拆分逻辑，分开处理状态更新 #

既然你的需求是点击时同步更新choiceOrder和jsonList两个状态，最清晰的方式是先判断当前操作是“添加”还是“移除”，然后分别处理两个状态的更新：

onClick={() => {
  const currentChoice = attrprops.attrChoice;
  // 先判断当前选项是否已存在
  const isAlreadySelected = choosebyprops.choiceOrder.includes(currentChoice);

  if (isAlreadySelected) {
    // 移除操作：更新choiceOrder
    choosebyprops.setChoiceOrder(prevOrder => 
      prevOrder.filter(item => item !== currentChoice)
    );
    // 移除对应的JSON数据：用slice创建新数组，避免修改原状态
    choosebyprops.setJsonList(prevList => {
      const targetIndex = prevList.findIndex(item => 
        // 这里需要你根据实际JSON结构，编写匹配当前choice的判断逻辑
        // 比如item.id === currentChoice.id 或者其他唯一标识
      );
      return [...prevList.slice(0, targetIndex), ...prevList.slice(targetIndex + 1)];
    });
  } else {
    // 添加操作：更新choiceOrder
    choosebyprops.setChoiceOrder(prevOrder => [...prevOrder, currentChoice]);
    // 添加对应的JSON数据
    choosebyprops.setJsonList(prevList => [...prevList, UpdateJson({...allprops})]);
  }
}}

额外优化建议 #

如果choiceOrder和jsonList的状态是强关联的，你也可以考虑用useEffect来监听choiceOrder的变化，自动同步更新jsonList，这样可以把状态更新的逻辑解耦：

// 在ChooseBy.js组件内部
useEffect(() => {
  // 这里根据choiceOrder重新生成jsonList
  const newJsonList = choiceOrder.map(choice => 
    // 根据每个choice生成对应的JSON数据
    UpdateJson({...allprops, choice})
  );
  setJsonList(newJsonList);
}, [choiceOrder, allprops]);

// 然后点击事件只需要更新choiceOrder即可
onClick={() => {
  const currentChoice = attrprops.attrChoice;
  choosebyprops.setChoiceOrder(prevOrder => 
    prevOrder.includes(currentChoice)
      ? prevOrder.filter(item => item !== currentChoice)
      : [...prevOrder, currentChoice]
  );
}}

这种方式的好处是，你只需要维护choiceOrder这一个单一数据源，jsonList会自动同步，避免了两个状态更新不同步的问题。

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