React INK中使用useStdin钩子无法获取同步状态的问题

核心问题排查 #

先确认你是不是没用到onSubmit回调自带的选中项参数，反而去读自己维护的本地state？Ink的MultiSelect组件触发onSubmit时，会直接把当前选中的项目数组作为参数传给回调函数。如果忽略这个参数，自己去取useState里的状态，很可能因为React状态更新的异步性拿到旧值——哪怕视图已经更新了，state的更新不会同步生效。

具体解决步骤 #

• 直接使用onSubmit的参数：把你的onSubmit回调改成这样，直接用传入的选中项，这是最稳妥的方式：

  const handleSubmit = (selectedItems) => {
    console.log(selectedItems); // 这里就是最新的选中项数组
    // 你的提交逻辑
  };
  
  <MultiSelect onSubmit={handleSubmit} items={items} />
  

• 如果必须用本地state：要是你需要自己维护选中状态，别在onSubmit里直接读state，改用useRef同步保存最新状态：

  const [selectedItems, setSelectedItems] = useState([]);
  const selectedRef = useRef(selectedItems);
  
  useEffect(() => {
    selectedRef.current = selectedItems;
  }, [selectedItems]);
  
  const handleSubmit = () => {
    console.log(selectedRef.current); // 这里能拿到最新的选中状态
  };
  
  <MultiSelect 
    onSubmit={handleSubmit} 
    items={items}
    onSelect={(item, isSelected) => {
      // 用函数式更新确保拿到最新状态
      if (isSelected) {
        setSelectedItems(prev => [...prev, item]);
      } else {
        setSelectedItems(prev => prev.filter(i => i.value !== item.value));
      }
    }}
  />
  

• 检查onSelect的状态更新逻辑：如果是自己维护选中状态，确保onSelect里用函数式更新（prev => ...）获取前一次的最新状态，别直接修改原数组，避免异步更新导致的状态覆盖。

常见误区提醒 #

没必要额外维护选中状态，除非你有自定义需求。Ink的MultiSelect本身会管理选中状态，直接用onSubmit的参数既不会出错，代码也更简洁。

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