前端 - Taro使用scrollView数据更新错行?

Question

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>

Answer 1

根据您提供的代码和问题描述，看起来您在更新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中的旧数据将被清除，然后添加最新的列表数据。这样就可以解决新数据显示在旧内容最后一条上面的问题。