React Native useState异常：输入数据存储与渲染不符问题求助

核心问题分析 #

1. 数据存储结构错误：当前将训练名称和组数作为独立元素追加到数组，导致workoutTextItems变成[训练名1, 组数1, 训练名2, 组数2,...]的扁平结构，无法绑定每组训练的对应关系。
2. map函数参数误用：Array.map()的第二个参数是数组索引，并非数组的第二个元素，所以你拿到的text1其实是当前项的索引值，这就是渲染时显示索引的原因。

分步修复代码 #

1. 修正状态添加逻辑（存储结构）

把每组训练的相关数据封装为对象，保证数据绑定：

const Body = (props) => {
  // 初始化状态设为空字符串，避免undefined问题
  const [workoutText, setText] = useState('');
  const [setsText, setText1] = useState('');
  const [workoutTextItems, setWorkoutItems] = useState([]);

  const handleAddTask = () => {
    Keyboard.dismiss();
    // 将训练名和组数封装为对象存入数组
    setWorkoutItems([
      ...workoutTextItems,
      { workout: workoutText, sets: setsText }
    ])
    setText('');
    setText1('');
  }
  // ... 其他代码
}

2. 修正渲染逻辑（map参数与组件传值）

调整map参数，从对象中取出对应属性传给WorkoutTile：

{workoutTextItems.map((item, index) => {
  return (
    <TouchableOpacity key={index} onPress={() => completeTask(index)}>
      <WorkoutTile
        workoutName={item.workout}
        sets={item.sets}
      />
    </TouchableOpacity>
  )
})}

// 同步修改WorkoutTile组件的props接收与渲染
const WorkoutTile = (props) => {
  return (
    <View style={styles.item}>
      <Text style={styles.workoutName}>{props.workoutName}</Text>
      <View style={styles.srwTitles}>
        <Text>{props.sets}</Text>
        <Text>reps</Text>
        <Text>weight</Text>
      </View>
    </View>
  );
};

3. 可选优化：添加输入校验

避免存入空数据，在handleAddTask中增加简单校验：

const handleAddTask = () => {
  // 校验必填项是否为空
  if (!workoutText.trim() || !setsText.trim()) {
    // 可在此添加弹窗提示用户补全输入
    return;
  }
  Keyboard.dismiss();
  setWorkoutItems([
    ...workoutTextItems,
    { workout: workoutText, sets: setsText }
  ])
  setText('');
  setText1('');
}

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