问答博客标签用户活动
logo极客观点logo研发管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Taro使用scrollView数据更新错行?

头像
YuuiD
    441512

    Taro使用scrollView数据更新问题

    项目需要做个聊天界面，聊天内容使用scrollView显示。进入页面出现的数据内容都很正常并且滚动到底部了。但是一旦发送新内容后，新数据会显示在旧内容最后一条上面。用了scrollTop和scrollIntoView都是这样。
    是不是我数据渲染的问题呢？应该如何解决呢

    下面列出我的部分代码

     componentWillMount() {
    this.getList()

  }

getList = () => {
    getChatRoomList().then(res => {
      if (res.data.rtnCode === 0) {
        this.setState({list: res.data.rtnData, viewId: `A${res.data.rtnData[res.data.rtnData.length - 1].id}`})
      }
    })
  }

// 点击发送新增内容
sendMsg = () => {
  const { content, userInfo } = this.state;

  this.setState({sending: true});
        if(content.length > 0) {
          Taro.showLoading()
    
          const params = {
            userId: userInfo.userId,
            userName: userInfo.nickname,
            text: content
          }
          addChatRoom(params).then((res) => {
            if(res.data.rtnCode === 0) {
              // 成功
              this.getList()
              this.setState({content: ''})
            } 
          })
          Taro.hideLoading()
        this.setState({sending: false});

        } else {
          Taro.showToast({
            title: '请先输入内容',
            duration: 2000,
            icon: 'error'
          })
        }
      
  }
//render 里面
<ScrollView id='chat-list' className='list-wrap' scrollY scrollWithAnimation scrollIntoView={this.state.viewId}>
        {list.length > 0 && list.map((item) => {
          if (Number(item.userId) === Number(userInfo.userId)) {
            return (
              <View id={`A${item.id}`} className='list-item-right' key={item.id}>
                 <Image src={person} className='imgIcon-person'></Image>
                 <Text className='list-name'>{item.userName}</Text>
                 <View className='list-content'>{item.text}</View>
                <View className='list-time'>{item.createTime}</View>
              </View>
              );
          }
                return (
                <View id={`A${item.id}`} className='list-item' key={item.id}>
                   <Image src={person} className='imgIcon-person'></Image>
                   <Text className='list-name'>{item.userName}</Text>
                   <View className='list-content'>{item.text}</View>
                  <View className='list-time'>{item.createTime}</View>
                </View>
                );
              })}
        
        </ScrollView>
    前端react.jstaroscrollview
    阅读 446
    avatarAI BotBETA

    根据您提供的代码和问题描述，看起来您在更新scrollView中的数据时遇到了问题。在发送新内容后，新数据会显示在旧内容最后一条上面，这是因为您在更新数据时没有清除旧数据，而是直接将新数据添加到旧数据的末尾。

    要解决这个问题，您需要在更新数据时清除旧数据，然后再添加新数据。您可以通过以下方式实现：

    1. 在发送新内容之前，先清空scrollView中的数据。
    2. 发送新内容后，获取最新的列表数据，并将其添加到scrollView中。

    以下是修改后的代码示例：

    componentDidMount() {
  this.getList()
}

getList = () => {
  getChatRoomList().then(res => {
    if (res.data.rtnCode === 0) {
      this.setState({list: res.data.rtnData, viewId: `A${res.data.rtnData[res.data.rtnData.length - 1].id}`})
    }
  })
}

sendMsg = () => {
  const { content, userInfo } = this.state;

  this.setState({sending: true});
  if(content.length > 0) {
    Taro.showLoading()
    const params = {
      userId: userInfo.userId,
      userName: userInfo.nickname,
      text: content
    }
    addChatRoom(params).then((res) => {
      if(res.data.rtnCode === 0) {
        // 清空scrollView中的数据
        this.setState({list: []})
        this.getList()
        this.setState({content: ''})
      } 
    })
    Taro.hideLoading()
    this.setState({sending: false});
  } else {
    Taro.showToast({
      title: '请先输入内容',
      duration: 2000,
      icon: 'error'
    })
  }
}

    在render方法中，您可以保持不变。这样，每次发送新内容时，scrollView中的旧数据将被清除，然后添加最新的列表数据。这样就可以解决新数据显示在旧内容最后一条上面的问题。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    宣传栏