Reactjs 在当前行显示激活的活动指示器，并显示react native

目前正在开发一个应用程序，它为用户提供页面上的新闻列表，每个新闻都有一个文本框，您可以在其中输入评论。 例如，10条新闻将有10个文本框

当用户发表评论并点击提交按钮时，所有10条新闻项目的活动指示器都会出现，但我希望它只显示发表评论的位置以及发表评论后，评论框应该为空

功能

state = {
  posts: [],
  comment: ""
};

commentPost = item => {
  const api = create({
    baseURL: "patch-to-api-url",
    headers: { Accept: "application/json" }
  });
  const self = this;
  self.setState({ modalLoader: true });
  api
    .post("news/posts/" + `${item.id}` + "/comments", {
      media: "",
      text: this.state.comment
    })
    .then(response => {
      console.log(response);
      self.setState({ modalLoader: false });

      //updating the state
      this.setState(prevState => ({
        posts: prevState.posts.map(el => {
          if (el.id === item.id) {
            return {
              ...el,
              commentsCount: el.commentsCount + 1
            };
          }
          return el;
        })
      }));
    });
};

查看

<ScrollView>
  {posts.map((item, i) => {
    return (
      <View key={i} style={styles.user}>
        <Card>
          <ListItem
            titleStyle={{ color: "#36c", fontWeight: "500" }}
            onPress={() =>
              navigation.navigate("PostComments", {
                postID: item.id,
                groupID: item.writer.group.id,
                communityID: item.group.community.id
              })
            }
            titleNumberOfLines={2}
            hideChevron={false}
            chevronColor="#36c"
            roundAvatar
            title={item.headline}
            avatar={{
              uri:
                "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
            }}
          />
          <Text
            style={{
              marginBottom: 10,
              fontSize: 16,
              color: "#000",
              fontFamily: "HelveticaNeue-Light"
            }}
          >
            {item.text}
          </Text>
          <TextInput
            onChangeText={onSetComment}
            label="Write Comment"
            underlineColor="#36a"
            style={{ backgroundColor: "#fff", width: "90%" }}
          />

          <View>
            <Icon
              name="md-send"
              type="ionicon"
              color="#999"
              onPress={() => {
                onCommentPost(item);
              }}
            />

            <View style={styles.loading}>
              <ActivityIndicator animating={modalLoader} size="small" />
            </View>
          </View>
        </Card>
      </View>
    );
  })}
</ScrollView>

{posts.map（（项目，i）=>{
返回(
导航。导航（“后命令”{
posted:item.id，
groupID:item.writer.group.id，
communityID:item.group.community.id
})
}
titlenumberofline={2}
hideChevron={false}
chevronColor=“#36c”
圆形化身
标题={item.headline}
化身={{
uri:
"https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
}}
/>
{item.text}
{
邮递员（项目）；
}}
/>
);
})}

您没有足够的状态来完成您想要的。在每篇文章中都需要一个独立的微调器，这意味着您必须将其状态存储在某个地方

您应该在每篇文章中添加modalLoader属性，而不是全局添加。将函数更改为如下所示：

commentPost = item => {
  const api = create({
    baseURL: "patch-to-api-url",
    headers: { Accept: "application/json" }
  });
  const self = this;
  self.setState({ posts: this.state.posts.map(post => post.id === item.id ? {...post, modalLoader: true } : post));
  api
    .post("news/posts/" + `${item.id}` + "/comments", {
      media: "",
      text: this.state.comment
    })
    .then(response => {
      console.log(response);
      self.setState({ posts: this.state.posts.map(post => post.id === item.id ? {...post, modalLoader: false } : post));

      //updating the state
      this.setState(prevState => ({
        posts: prevState.posts.map(el => {
          if (el.id === item.id) {
            return {
              ...el,
              commentsCount: el.commentsCount + 1
            };
          }
          return el;
        })
      }));
    });
};

<ScrollView>
  {posts.map((item, i) => {
    return (
      <View key={i} style={styles.user}>
        <Card>
          <ListItem
            titleStyle={{ color: "#36c", fontWeight: "500" }}
            onPress={() =>
              navigation.navigate("PostComments", {
                postID: item.id,
                groupID: item.writer.group.id,
                communityID: item.group.community.id
              })
            }
            titleNumberOfLines={2}
            hideChevron={false}
            chevronColor="#36c"
            roundAvatar
            title={item.headline}
            avatar={{
              uri:
                "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
            }}
          />
          <Text
            style={{
              marginBottom: 10,
              fontSize: 16,
              color: "#000",
              fontFamily: "HelveticaNeue-Light"
            }}
          >
            {item.text}
          </Text>
          <TextInput
            onChangeText={onSetComment}
            label="Write Comment"
            underlineColor="#36a"
            style={{ backgroundColor: "#fff", width: "90%" }}
          />

          <View>
            <Icon
              name="md-send"
              type="ionicon"
              color="#999"
              onPress={() => {
                onCommentPost(item);
              }}
            />

            <View style={styles.loading}>
              <ActivityIndicator animating={item.modalLoader} size="small" />
            </View>
          </View>
        </Card>
      </View>
    );
  })}
</ScrollView>

您的组件看起来像这样：

commentPost = item => {
  const api = create({
    baseURL: "patch-to-api-url",
    headers: { Accept: "application/json" }
  });
  const self = this;
  self.setState({ posts: this.state.posts.map(post => post.id === item.id ? {...post, modalLoader: true } : post));
  api
    .post("news/posts/" + `${item.id}` + "/comments", {
      media: "",
      text: this.state.comment
    })
    .then(response => {
      console.log(response);
      self.setState({ posts: this.state.posts.map(post => post.id === item.id ? {...post, modalLoader: false } : post));

      //updating the state
      this.setState(prevState => ({
        posts: prevState.posts.map(el => {
          if (el.id === item.id) {
            return {
              ...el,
              commentsCount: el.commentsCount + 1
            };
          }
          return el;
        })
      }));
    });
};

<ScrollView>
  {posts.map((item, i) => {
    return (
      <View key={i} style={styles.user}>
        <Card>
          <ListItem
            titleStyle={{ color: "#36c", fontWeight: "500" }}
            onPress={() =>
              navigation.navigate("PostComments", {
                postID: item.id,
                groupID: item.writer.group.id,
                communityID: item.group.community.id
              })
            }
            titleNumberOfLines={2}
            hideChevron={false}
            chevronColor="#36c"
            roundAvatar
            title={item.headline}
            avatar={{
              uri:
                "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
            }}
          />
          <Text
            style={{
              marginBottom: 10,
              fontSize: 16,
              color: "#000",
              fontFamily: "HelveticaNeue-Light"
            }}
          >
            {item.text}
          </Text>
          <TextInput
            onChangeText={onSetComment}
            label="Write Comment"
            underlineColor="#36a"
            style={{ backgroundColor: "#fff", width: "90%" }}
          />

          <View>
            <Icon
              name="md-send"
              type="ionicon"
              color="#999"
              onPress={() => {
                onCommentPost(item);
              }}
            />

            <View style={styles.loading}>
              <ActivityIndicator animating={item.modalLoader} size="small" />
            </View>
          </View>
        </Card>
      </View>
    );
  })}
</ScrollView>

{posts.map（（项目，i）=>{
返回(
导航。导航（“后命令”{
posted:item.id，
groupID:item.writer.group.id，
communityID:item.group.community.id
})
}
titlenumberofline={2}
hideChevron={false}
chevronColor=“#36c”
圆形化身
标题={item.headline}
化身={{
uri:
"https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg"
}}
/>
{item.text}
{
邮递员（项目）；
}}
/>
);
})}

您正在所有迭代帖子中共享modalLoader状态。Post应该是单个有状态组件。然后，对于已更新的特定组件，您只需要更新该状态

页面加载时显示modalLoder。当用户尚未发表评论时，我将此动画设置={item.modalLoader}更改为动画设置={item.modalLoade===true}，并且成功了