React Native待办列表传状态至兄弟组件时遇陈旧状态问题

核心问题分析 #

1. EditTask组件状态未同步props更新：useState(item.text)仅在组件首次挂载时初始化，后续父组件传递的item更新时，editingText不会自动同步，导致显示旧数据。
2. 父组件触发模态框的逻辑冗余且存在闭包问题：使用taskEditTrigger作为中间状态，加上useEffect依赖错误，导致模态框显示时机与taskEdit更新不同步。
3. Task组件memo语法错误：条件判断中If大写，且未覆盖所有任务状态字段，可能导致组件不按需渲染。

分步解决方案 #

1. 修复EditTask组件的状态同步问题 #

添加useEffect监听item变化，实时更新编辑文本状态：

function EditTask({ item, editModalVisible, setEditModalVisible, setTaskEdit}) {
  const [editingText, setEditingText] = useState(item?.text || '');

  // 监听item变化，同步更新编辑内容
  useEffect(() => {
    setEditingText(item?.text || '');
  }, [item]);

  const onPressEditTask = () => {
    setEditModalVisible(false);
    setTaskEdit({});     
  };

  return (
    <Modal visible={editModalVisible}>
      <TouchableOpacity onPress={onPressEditTask}>
        <Text>{editingText}</Text>
      </TouchableOpacity>
    </Modal>
  );
}

2. 简化父组件的模态框触发逻辑 #

移除冗余的taskEditTrigger状态，直接在任务点击时打开模态框，避免闭包问题：

// 父组件状态声明
const [editModalVisible, setEditModalVisible] = useState(false);
const [taskEdit, setTaskEdit] = useState({});

// 移除原有的useEffect
// ...

// 修改Task组件的props传递
const renderItem = ({ item }) => (
  <Task
    item={item}
    setTaskEdit={setTaskEdit}
    setEditModalVisible={setEditModalVisible} // 直接传递打开模态框的方法
  />
);

// 确保EditTask组件接收setTaskEdit
return (
  <View>
    <FlatList
      data={toDos}
      renderItem={renderItem}
    />
    <EditTask
      item={taskEdit}
      editModalVisible={editModalVisible}
      setEditModalVisible={setEditModalVisible}
      setTaskEdit={setTaskEdit} // 补充传递该方法
    />
  </View>
);

3. 修正Task组件的点击逻辑与memo语法 #

去掉中间状态taskEditTrigger，直接调用打开模态框的方法，并修正memo的语法错误：

const Task = ({ item, setTaskEdit, setEditModalVisible }) => {
  // 补充声明缺失的状态
  const [isTaskCompleteAlertVisible, setIsTaskCompleteAlertVisible] = useState(false);

  const onPressTask = () => {
    console.log(item.text)
    console.log('Task is rendering')

    if (item.isComplete) {
      setIsTaskCompleteAlertVisible(true)
    } else {
      setTaskEdit(item);
      setEditModalVisible(true); // 直接打开模态框
    }             
  };

  return (
    <View>
      <TouchableOpacity onPress={onPressTask}>
        <Text>{item.text}</Text>
      </TouchableOpacity>
    </View>
  );
};

// 修正memo的语法，补充完整的状态判断
export default memo(Task, (prevProps, nextProps) => {
  return prevProps.item.id === nextProps.item.id &&
         prevProps.item.text === nextProps.item.text &&
         prevProps.item.isComplete === nextProps.item.isComplete;
});

验证效果 #

• 点击任务A：taskEdit更新为A的数据，模态框直接打开，editingText同步显示A的文本
• 点击任务B：taskEdit更新为B的数据，editingText实时切换为B的文本，模态框显示正确内容

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