如何为React表格的每一行创建独立状态变量？

1. 调整状态存储结构 #

将原来单个dateValue的状态，改为用对象存储每行的独立日期值，以行的唯一标识（比如loadedToken.id）作为键：

const [rowDates, setRowDates] = useState({});

2. 绑定每行DateTimePicker的独立值与变更逻辑 #

修改DateTimePicker的value属性，并新增onChange事件，确保只更新当前行的日期：

<DateTimePicker
  minDate={moment().toDate()}
  value={rowDates[loadedToken.id] || moment().toDate()} // 无值时默认用当前日期
  onChange={(newDate) => {
    setRowDates(prev => ({
      ...prev,
      [loadedToken.id]: newDate // 仅更新当前行对应的日期
    }))
  }}
/>

3. 点击Lock按钮时获取对应行的日期 #

在调用lockToken时，传入当前行存储的日期值（如需时间戳可通过getTime()转换）：

<Button 
  disabled={!isItemSelected} 
  color="primary" 
  variant="contained" 
  onClick={async () => {                        
    const targetDate = rowDates[loadedToken.id] || moment().toDate();
    await lockToken(selected, props.smartNftId, targetDate.getTime())
  }}
>
  Lock
</Button>

可选：初始化所有行的默认日期 #

如果需要页面加载时就给所有行设置默认日期，可以在组件初始化时处理：

useEffect(() => {
  const initialDateMap = finalLoadedTokensData.reduce((acc, token) => {
    acc[token.id] = moment().toDate();
    return acc;
  }, {});
  setRowDates(initialDateMap);
}, [finalLoadedTokensData]);

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