如何在useState中设置多可能初始状态？求更优实现方案

首先要明确：你当前的代码逻辑不符合需求。因为'accepted' || 'waiting_for_review' || 'rejected'里的三个都是非空字符串，属于JavaScript中的"真值"，所以这个表达式永远会返回第一个值'accepted'，完全没有实现"按顺序优先选取存在的状态值"的逻辑。

正确的实现方式（分两种场景） #

场景1：accepted/waiting_for_review/rejected是可能为空的变量

如果这三个是变量（比如可能为undefined、null或空字符串），需要按顺序取第一个有值的变量，推荐用数组的find方法：

const [selectedStuffState, setSelectedStuffState] = useState(
  showStateColumn ? [accepted, waiting_for_review, rejected].find(Boolean) : ''
);

find(Boolean)会遍历数组，返回第一个转为布尔值为true的元素，完美匹配"按顺序优先选取存在值"的需求，代码也更清晰易读。

场景2：需要判断固定状态值是否存在于可用状态列表中

如果是要从现有状态集合里（比如接口返回的availableStates数组）按优先级选取第一个存在的状态，写法如下：

// 定义优先级顺序的状态列表
const priorityStates = ['accepted', 'waiting_for_review', 'rejected'];

const [selectedStuffState, setSelectedStuffState] = useState(
  showStateColumn 
    ? priorityStates.find(state => availableStates.includes(state)) 
    : ''
);

这种写法明确了优先级顺序，也能准确找到第一个存在于可用集合中的状态。

为什么原写法不行？ #

JavaScript的逻辑或运算符||会返回第一个"真值"，而你写的'accepted'是字符串字面量，本身就是真值，所以后面的waiting_for_review和rejected永远不会被判断，完全达不到"优先选取存在的状态值"的目的。

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