dangerouslySetInnerHTML的元素diff比较不正确,导致内容消失。



  • 小程序基础库版本 2.11.3
    taro版本 3.0.0-rc.5

    import React, { Component } from 'react'
    import Taro  from '@tarojs/taro'
    import { View} from '@tarojs/components'
    
    class Index extends Component {
      constructor(props){
        super(props);
        this.state={
          'list' : [
            '【1 apple】',
            '【2 banana】',
            '【3 orange】',
          ]
        }
      }
      componentDidMount(){
        setTimeout(()=>{
          this.setState({
            'list':['【4 peach】',...this.state.list]
          })
        },2000)
      }
      render () {
        let {
          list
        } = this.state;
        return <View>
          {list.map((v,index)=>{
            return <View key={index}  dangerouslySetInnerHTML={{__html:v}}></View>
          })}
        </View>
      }
    }
    
    export default Index
    

    简单的代码,目的是使用

    dangerouslySetInnerHTML
    

    输出数组元素。
    map方法里,如果View不加key,或者key仅为index,得不到预期结果。仅当设置了key,并且key唯一,才能得到唯一性结果。

    期望的结果是什么?
    https://codesandbox.io/s/eloquent-mirzakhani-obirq?file=/src/App.js

    页面初始显示
    【1 apple】
    【2 banana】
    【3 orange】
    两秒后显示
    【4 peach】
    【1 apple】
    【2 banana】
    【3 orange】
    

    实际的结果是什么?

    页面初始显示
    【1 apple】
    【2 banana】
    【3 orange】
    两秒后显示
    【3 orange】
    

    改变插入的数组元素顺序,得到的结果不一致。根据实际情况简单猜测可能是diff的时候出问题了?



  • @sandor_2 升级到最新版呢?



  • @Taro-小助手-honly
    您好,该问题在升级到最新版本 (rc 6)后依然存在。


登录后回复