Блог

В настоящее время я работаю над приложением, в котором пользователи могут комментировать определенную страницу, и после комментария их комментарий должен быть первым. В настоящее время я использую приведенный ниже скрипт, но при выполнении post может отправляться на сервер, но представление не меняется

КОНТЕЙНЕРНЫЙ КОМПОНЕНТ

 commentPost = () => {
  const api = create({
    baseURL: "baseurl.com/api",
    headers: {
      Accept: "application/json",
      header1: this.state.communityID,
      header2: userID
    }
  });
  const self = this;
  self.setState({ showCommentLoader: true });
  api
    .post(
      "newItems/"  
        `${this.state.groupID}`  
        "/members/"  
        `${userID}`  
        "/posts/"  
        `${this.state.postID}`  
        "/comments",
      {
        text: this.state.newComment
      }
    )
    .then(response => {
      console.log(response);
      self.setState({ showCommentLoader: false });

      //updating the state
      this.setState(prevState => ({
        postComments: prevState.postComments.map(el => {
          return {
            ...el,
            text: this.state.comment,
            likesCount: 0
          };
          return el;
        })
      }));
    });
};
  

Вид

 <View>
  <Text
    style={{
      paddingLeft: 10,
      fontSize: 16,
      color: "#4a4a4a",
      fontFamily: "HelveticaNeue-Light"
    }}
  >
    {item.text}
  </Text>
  <TouchableOpacity
    onPress={() => checkLikeDisLike(item)}
    style={{
      alignSelf: "flex-start",
      position: "relative",
      top: 5,
      paddingLeft: 10
    }}
  >
    <Text style={{ fontSize: 14 }}>
      {item.likesCount}
      {"n"}
    </Text>
    <Icon name="md-thumbs-up" type="ionicon" />
  </TouchableOpacity>

  <TouchableOpacity
    style={{
      alignSelf: "flex-end",
      position: "relative",
      top: -20,
      paddingRight: 5,
      paddingBottom: 20
    }}
  >
    <Icon name="ios-chatboxes" type="ionicon" color="#517fa4" />
  </TouchableOpacity>
</View>
  

Что я могу сделать, чтобы отобразить комментарий после его отправки на сервер, точно так же, как вы можете сделать в native javascript unshift

Из вашего кода похоже, что вам не нужно self просто вызывать this.setState напрямую.

Но setState не меняется, потому что вы устанавливаете состояние, используя свою старую ссылку на массив. используйте это, чтобы скопировать ваш массив в новую переменную var newArray = oldArray.slice(); , а затем установить для нее значение state.

Что-то вроде этого:

Однако я не проверяю ваше сопоставление,

 const newArray = this.state.postComments.slice();
// do your mapping changes here
this.setState({postComments: newArray});