React Native: измените цвет компонента с помощью TouchableOpacity onPress ()

Question

Я делаю список дел, который будет отображаться на странице, где пользователь может щелкнуть значок, чтобы отметить задачу как выполненную, при этом цвет фона соответствующей задачи изменится. Проблема, с которой я столкнулся, заключается в том, что я повторно использую компонент «задача» и не могу указать, фон какого компонента должен изменить цвет. Следовательно, щелчок по любому из значков изменяет цвет фона только одного компонента. GIF из того, что я имею в виду, ниже:

Меняется только один компонент

Мой код выглядит следующим образом:

export default function GoalItems(props) {
  const goals = props.goals;

  if (goals == 1) {
    return <Goal goal="Goal 1" />;
  } else if (goals == 2) {
    return (
      <View>
        <Goal goal="Goal 1" />
        <View style={{marginVertical: 15}} />
        <Goal goal="Goal 2" />
      </View>
    );
  } else {
    return (
      <View>
        <Goal goal="Goal 1" />
        <View style={{marginVertical: 15}} />
        <Goal goal="Goal 2" />
        <View style={{marginVertical: 15}} />
        <Goal goal="Goal 3" />
      </View>
    );
  }
}

function Goal(props) {
  const text = props.goal;
  const [checkBox, setCheckBox] = useState(false);
  const [checkBoxValue, setCheckBoxValue] = useState(
    'ios-checkmark-circle-outline',
  );
  const [iconColour, setIconColour] = useState('#FF1744');
  const [goalColour, setGoalColour] = useState('#64B5F6');

  onPressCheckBox = () => {
    setCheckBox(!checkBox);
    if (checkBox) {
      setCheckBoxValue('ios-checkmark-circle');
      setIconColour('#1ABC9C');
      setGoalColour('#1ABC9C');
    } else {
      setCheckBoxValue('ios-checkmark-circle-outline');
      setIconColour('#FF1744');
      setGoalColour('#64B5F6');
    }
  };

  return (
    <View style={styles.goalContainer}>
      <View style={[{backgroundColor: goalColour}, styles.goal]}>
        <Text style={styles.text}>{text}</Text>
      </View>
      <TouchableOpacity onPress={() => this.onPressCheckBox()}>
        <Icon
          name={checkBoxValue}
          size={40}
          style={styles.checkbox}
          color={iconColour}
        />
      </TouchableOpacity>
    </View>
  );
}

И я просто render <GoalItems goals={num_of_goals} /> на главной странице моего приложения. Я знаю, что он плохо закодирован с операторами if, но я не уверен, как вернуть сумму X <GoalItems /> с учетом num_of_goals, но это отдельная проблема ...

Любые советы будут оценены. Заранее спасибо!

Answer 1

Думаю, причина в асинхронности. Когда вы звоните setCheckBox(!checkBox), вы должны дождаться, чтобы он заработал. Когда это будет сделано, вы продолжите обрабатывать новое состояние.

onPressCheckBox = () => {
      setCheckBox(!checkBox)
};
useEffect(() => {
     if (checkBox) {
      setCheckBoxValue('ios-checkmark-circle');
      setIconColour('#1ABC9C');
      setGoalColour('#1ABC9C');
    } else {
      setCheckBoxValue('ios-checkmark-circle-outline');
      setIconColour('#FF1744');
      setGoalColour('#64B5F6');
    }
 }, [])