使用 setState() 更新数组时发生反应 / TypeScript 错误

Question

I am looking to modify a property of one of the items in the array using the updater returned from setState. The function is passed as props to the child, who then call this with their own index to change their status.

  const tryMarkHabitAsComplete = (index: number) => {
    let list: HabitType[] = [...habitList];
    let habit = {
      ...list[index],
      isComplete: true,
    };
    list[index] = habit;
    setHabitList({list});
  };

When running with setHabitList(list); the array gets cleared and becomes undefined, so I am unable to use it after I call this function once.

The error that keeps appearing is:

Argument of type '{ list: HabitType[]; }' is not assignable to parameter of type 'SetStateAction<HabitType[]>'. Object literal may only specify known properties, and 'list' does not exist in type 'SetStateAction<HabitType[]>'

I am treating the state as immutable and attempting (I think) to set the state. When debugging, everytime I click I empty the array for my habitsList. Further up, I define the state as:

const [habitList, setHabitList] = useState<HabitType[]>([]);

If I try to setState in other ways, the array becomes undefined or blank and loses information. I should clarify, this is a side project written w/ react-native.

MRE Edit:

2 components in a react-native app, discarding css & irrelevant imports: Chain.tsx

export type HabitType = {
  text: string;
  index: number;
  isComplete: boolean;
  tryMarkHabit: (index: number) => void;
};

const Chain = (props: any) => {
  const [habitList, setHabitList] = useState<HabitType[]>([]);

  // Set the initial state once w/ dummy values
  useEffect(() => {
    setHabitList([
      {
        text: "1",
        index: 0,
        isComplete: false,
        tryMarkHabit: tryMarkHabitAsComplete,
      },
      {
        text: "2",
        index: 1,
        isComplete: false,
        tryMarkHabit: tryMarkHabitAsComplete,
      }
    ]);
  }, []);

  // Only is previous item is complete, let habit be marked as complete
  const tryMarkHabitAsComplete = (index: number) => {
    let list: HabitType[] = [...habitList];
    let habit = {
      ...list[index],
      isComplete: true,
    };
    list[index] = habit;
    setHabitList(list);
  };

  let habitKeyCount = 0;

  return (
    <View style={styles.container}>
      {habitList.map((habit) => (
        <Habit key={habitKeyCount++} {...habit} />
      ))}
    </View>
  );
};

export default Chain;

Habit.tsx

import { HabitType } from "./Chain";

const Habit = ({ text, index, isComplete, tryMarkHabit }: HabitType) => {
  const [complete, setComplete] = useState<boolean>(false);

  return (
    <TouchableOpacity
      style={complete ? styles.completeHabit : styles.uncompleteHabit}
      onPress={() => tryMarkHabit(index)}
    >
      <Text style={styles.chainText}>{text}</Text>
    </TouchableOpacity>
  );
};

export default Habit;

When I press a habit, it calls tryMarkHabitAsComplete successfully, however it appears to clear the array - the array afterwards becomes undefined as far as I can tell.

Answer 1

Issue

If I had to guess I'd say you've a stale enclosure of your habitList state in the callback, which itself is a stale enclosure in your state.

Solution

I suggest to instead use a functional state update in your handler. A functional update allows your state to be updated from the previous state, not the state from the render cycle the update was enqueued in. It's a small, subtle, but important distinction.

I also suggest to not enclose the handler in an enclosure in state either. Just pass it to Habit as a normal callback, this way you avoid any stale enclosures.

const Chain = (props: any) => {
  const [habitList, setHabitList] = useState<HabitType[]>([]);

  // Set the initial state once w/ dummy values
  useEffect(() => {
    setHabitList([
      {
        text: "1",
        index: 0,
        isComplete: false,
      },
      {
        text: "2",
        index: 1,
        isComplete: false,
      }
    ]);
  }, []);

  // Only is previous item is complete, let habit be marked as complete
  const tryMarkHabitAsComplete = (index: number) => {
    setHabitList(list => list.map((habit, i) => i === index ? {
      ...habit,
      isComplete: true,
    } : habit);
  };

  let habitKeyCount = 0;

  return (
    <View style={styles.container}>
      {habitList.map((habit) => (
        <Habit
          key={habitKeyCount++}
          {...habit}
          tryMarkHabit={tryMarkHabitAsComplete}
        />
      ))}
    </View>
  );
};

Edit for isComplete Style

Habit should just consume the passed isComplete prop to set the desired CSS style.

const Habit = ({ text, index, isComplete, tryMarkHabit }: HabitType) => {
  return (
    <TouchableOpacity
      style={isComplete ? styles.completeHabit : styles.uncompleteHabit}
      onPress={() => tryMarkHabit(index)}
    >
      <Text style={styles.chainText}>{text}</Text>
    </TouchableOpacity>
  );
};