Передать значение между компонентами - React Native

Question

У меня есть приложение на нативном языке, где я задаю вопросы о проводимом опросе и отображаю каждый вопрос в виде компонента карты, изготовленного по индивидуальному заказу:

const { cardTitle, cardDescription, onYesPress, onNoPress } = this.props;
   return (
      <View style={styles.container}>
        <Card containerStyle={styles.votingCardContainer} title={cardTitle}>
          <View style={styles.votingCard}>
            <Text style={{ alignItems: 'center', fontSize: 23 }}>
              {cardDescription}
            </Text>
            <View style={styles.buttonRow}>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={onYesPress}
                  iconName={icons.YES}
                  iconColor={'green'}
                  iconSize={70}
                />
              </View>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={onNoPress}
                  iconName={icons.NO}
                  iconColor={'red'}
                  iconSize={70}
                />
              </View>
            </View>
          </View>
        </Card>
      </View>
    );

когда пользователи входят в систему, я получал вопросы опроса из БД и представлял их в виде компонента OnGoingSurvey в компоненте MainScreen.

          <OnGoingSurveyCard
            onYesPress={this.handleYesPress}
            onNoPress={this.handleNoPress}
            cardTitle={"Question Title "}
            cardDescription={"Question Description?"}
          />

Как видите, OnGoingSurvey имеет две кнопки, Да и Нет. Мне нужно знать, на какой вопрос отвечает пользователь и каков его / ее ответ. Но я не знаю, как передать данные опроса и ответа между компонентами OnGoingSurvey и MainScreen и снова отправить эти данные в БД.

Любая помощь будет оценена.

Спасибо.

UPDATE

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

  handleAnswerPress = (yesPressed, questionId) => {
    if (yesPressed) {
      this.setState({
        surveyAnswer: 'Yes',
        whichSurvey: questionId,
      });
    } else {
      this.setState({
        surveyAnswer: 'No',
        whichSurvey: questionId,
      });
    }
    console.warn(this.state.whichSurvey, this.state.surveyAnswer);
  };

, где questionId и questionAnswer были изначально установлены в ноль.

   this.state = {
      whichSurvey: null,
      surveyAnswer: null,
    };
  }

когда я нажимал одну из этих кнопок, первое нажатие предупреждает questionId: null questionAnswer: null, а второй вывод - тот, на котором я нажимал раньше. например, если я нажал «да», а затем «нет», сначала показывается значение «ноль», а затем questionId и no

Answer 1

Передайте вопрос id в OnGoingSurveyCard

          <OnGoingSurveyCard
            id={1}
            onYesPress={this.handleYesPress}
            onNoPress={this.handleNoPress}
            cardTitle={"Question Title "}
            cardDescription={"Question Description?"}
          />

Затем передайте идентификатор, когда пользователь нажмет любую кнопку

const { id, cardTitle, cardDescription, onYesPress, onNoPress } = this.props;
   return (
      <View style={styles.container}>
        <Card containerStyle={styles.votingCardContainer} title={cardTitle}>
          <View style={styles.votingCard}>
            <Text style={{ alignItems: 'center', fontSize: 23 }}>
              {cardDescription}
            </Text>
            <View style={styles.buttonRow}>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={(e) => onYesPress(id)}
                  iconName={icons.YES}
                  iconColor={'green'}
                  iconSize={70}
                />
              </View>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={(e) => onNoPress(id)}
                  iconName={icons.NO}
                  iconColor={'red'}
                  iconSize={70}
                />
              </View>
            </View>
          </View>
        </Card>
      </View>
    );

Затем в handleYessPress и handleNoPress вы можете получить это так:

handleYesPress = id => {
    //id is the id of question
}

Я бы также предложил вам использовать только одну функцию, если они примерно одинаковы (кажется, что так):

handlePress = (yesPressed, questionId) => {
      this.setState({
        surveyAnswer: yesPressed ? "Yes" : "No",
        whichSurvey: questionId,
      });
}

<OnGoingSurveyCard
  id={1}
  handlePress={this.handlePress}
  cardTitle={"Question Title "}
  cardDescription={"Question Description?"}
/>

//YES BUTTON
<CustomIconButton
    onPress={(e) => handlePress(true, id)}
    iconName={icons.YES}
    iconColor={'green'}
    iconSize={70}
/>

//NO BUTTON
<CustomIconButton
    onPress={(e) => handlePress(false, id)}
    iconName={icons.NO}
    iconColor={'red'}
    iconSize={70}
/>