小程序中，render函数中变量名与state属性名或props属性名一致，会导致视图无响应

[shhdgit]

问题描述

如题，之前反馈过 #957 ，现在已成功复现。在微信小程序端有此表现

复现步骤

1. 用cli初始化一个新redux模板项目
2. 将项目中 index.tsx 改为（复制粘贴即可）：

import { ComponentClass } from "react";
import Taro, { Component, Config } from "@tarojs/taro";
import { View, Button, Text } from "@tarojs/components";
import { connect } from "@tarojs/redux";

import { add, minus, asyncAdd } from "../../actions/counter";

import "./index.styl";

type PageStateProps = {
  counter: {
    num: number;
  };
};

type PageDispatchProps = {
  add: () => void;
  dec: () => void;
  asyncAdd: () => any;
};

type PageOwnProps = {};

type PageState = {};

type IProps = PageStateProps & PageDispatchProps & PageOwnProps;

interface Index {
  props: IProps;
}

@connect(
  ({ counter }) => ({
    counter
  }),
  dispatch => ({
    add() {
      dispatch(add());
    },
    dec() {
      dispatch(minus());
    },
    asyncAdd() {
      dispatch(asyncAdd());
    }
  })
)
class Index extends Component {
  config: Config = {
    navigationBarTitleText: "首页"
  };
  state = {
    testData: "1"
  };

  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps);
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  test() {
    this.setState({
      testData: "2"
    });
  }

  render() {
    const testData = <View>{this.state.testData}</View>;
    console.log(this.state.testData);

    return (
      <View className="index">
        <Button className="add_btn" onClick={this.props.add}>
          +
        </Button>
        <Button className="dec_btn" onClick={this.props.dec}>
          -
        </Button>
        <Button className="dec_btn" onClick={this.test}>
          test
        </Button>
        <View>
          <Text>{this.props.counter.num}</Text>
        </View>
        <View>{testData}</View>
      </View>
    );
  }
}

export default Index as ComponentClass<PageOwnProps, PageState>;

3. 点击 test 按钮，console.log 打印 2，视图不会发生变化
4. 将 const testData = <View>{this.state.testData}</View>; 改为 const td = <View>{this.state.testData}</View>;，一切正常。（即render函数中变量名不能与state属性名一致，props同理）

期望行为

render函数内变量名不应该有“受 state、props 属性名影响”这种特性

报错信息

无

系统信息

• 操作系统: MacOS 10.14
• Taro 版本 1.1.0
• Node.js 版本 10.6.0
• 报错平台 weapp

附加信息

不用connect连接的情况下也不会有该问题，所以使用redux模板新建项目可复现

[yuche]

这是一个老问题了。state 和 props 目前的确不能重名，他们都会以同样的名字打到小程序的 data 去。

你可以在 #109 追踪这个问题的进展。

[yuche]

Duplicate of #109

[ccqgithub]

@yuche 我也遇到这个问题了，不是props和state重名，而是render里的变量名不能和state的key重名，这也太容易出错了~

render () {
    const { sysStore: { windowHeight } } = this.props;
    const h2 = this.state.windowHeight;
    console.log(windowHeight, h2);

    return (
      <View className="page page-orders">
        早餐券详情 { h2 } || { windowHeight } 
      </View>
    )
  }

props 的属性是 sysStore，但windowHeight还是冲突了！