NervJS / taro

开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/
https://docs.taro.zone/
Other
35.56k stars 4.79k forks source link

props传给子组件为object时,如果object的子项长度不一样,props更新后传过去的数据不正确 #1065

Closed nyrf closed 5 years ago

nyrf commented 5 years ago

问题描述 父组件传一个object类型的props给子组件,父组件中object类型的state更新后,如如代码所示,传过去的数据得到后不正确,用原生测试过是没问题的,

复现步骤

import { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import Demo from '../../components/demo'
class PropObjectPage extends Component {
  state = {
    product: { id: 1, name: 'huawei', variants: {'红': {'price': 1, 'stock': 100}}},
  }

  updateProduct() {
    const newProduct = {
      id: 2, name: 'apple', variants: {
        '黑': { 'price': 1, 'stock': 100 },
        '银': {'price': 1, 'stock': 100}
      }
    }
    this.setState({
      product: newProduct
    }, () => {
      console.log('实际product更新后', this.state.product)
    })
  }

  render() {
    return (
      <View>
        {this.state.time}
        {this.state.product.name}
        <Demo product={this.state.product} />
        <View onClick={this.updateProduct.bind(this)}>Update</View>
      </View>
    )
  }
}
import { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
export default class Demo extends Component {

  state = {
  }

  componentWillReceiveProps(newProps) {
    console.log("props 传递的product更新后", newProps.product)
  }

  render() {
    return (
      <View> demo id is : {this.props.product.name}</View>
    )
  }
}

期望行为

state = {
    product: { id: 1, name: 'huawei', variants: {'红': {'price': 1, 'stock': 100}}},
  }

这个在父组件中更新为

 const newProduct = {
      id: 2, name: 'apple', variants: {
        '黑': { 'price': 1, 'stock': 100 },
        '银': {'price': 1, 'stock': 100}
      }
    }

子组件得到的新的product应该为

 {
      id: 2, name: 'apple', variants: {
        '黑': { 'price': 1, 'stock': 100 },
        '银': {'price': 1, 'stock': 100}
      }
    }

而不是

{"id":2,"name":"apple","variants":{"红":{"price":1,"stock":100},"黑":{"price":1,"stock":100},"银":{"price":1,"stock":100}}}

报错信息

wx20181110-092529 2x

系统信息

补充信息 [可选] 这个好像和我昨天发的 https://github.com/NervJS/taro/issues/1058 原因是一样的

Chen-jj commented 5 years ago

1058