Question

我有<OnGoingSurveyCard/>组件，用户可以在其上按2个按钮：是或否。当用户按下这些按钮之一时，我想在将数据发布到Web服务时呈现<ActivityIndicator/>。将数据成功添加到数据库后，我想显示来自Web服务的消息。该组件正在使用.map()函数进行渲染。

到目前为止，这是我的工作；我可以在发布时显示<ActivityIndicator/>，并在成功发布后显示来自数据库的消息。我的问题是，当按下按钮时，所有映射的<OnGoingSurveyCard/>组件都显示<ActivityIndicator/>，之后，所有组件都显示相同的消息。

这是我的<OnGoingSurveyCard/>：

  render() {
    const { questionId, cardTitle, cardDescription, handleAnswerPress, isQuestionAdding } = 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>
            {isQuestionAdding ? this.renderActivityIndicator() : this.renderButtons(handleAnswerPress, questionId)}
          </View>
        </Card>
      </View>
    );
  }

这是我在发生所有活动的<OnGoingSurveyCard/>中渲染<MainScreen/>的方式：

const { activeSurveys, isQuestionAdding } = this.state;
{activeSurveys.map(activeSurvey => {
                return (
                  <OnGoingSurveyCard
                    questionId={activeSurvey.QuestionId}
                    handleAnswerPress={this.handleAnswerPress}
                    cardTitle={activeSurvey.Title}
                    cardDescription={activeSurvey.Description}
                    isQuestionAdding={isQuestionAdding}
                  />
                );
              })}

获取和管理状态：

    fetch(url, {
      headers: headers,
      method: 'GET',
      body: JSON.stringify({
        UserId: userId,
        QuestionId: questionId,
        QuestionVote: yesPressed,
      }),
    })
      .then(response => response.json())
      .then(responseJson => {
        if(responseJson.statusCode === "200"){
          this.setState({
            isQuestionAdding: false,
          })
        }
      })
      .catch(error => console.log('Error: ', error));

任何帮助将不胜感激，谢谢。

如何在映射的组件中呈现不同的内容

0 个答案: