使用解构赋值的时候，因对象的变量名与state中的变量名相同，导致组件使用的是state中的变量

[zhcxk1998]

问题描述
在使用解构赋值时候，因对象中的变量名与state内的变量名相同，导致组件在引用此变量的时候引用到了state中的变量

  /* 在state中定义了message变量 */
  constructor(props) {
    super(props);
    this.state = {
      message: ''
    }
  }

  /* 在render内遍历数组产生新的组件时，因对象内message变量与state中变量名相同，导致这里错误的引用了state中的变量，而不是对象中的message。如若改成messageInfo.message或者改变state中变量名就不会出现此错误 */
  ...
  {messageList.slice().map(messageInfo => {
      const { message, messageId } = messageInfo
      return <View id={messageId} key={messageId}>{message}</View>
    })}

期望行为
希望尽快查看一下，这是否属于Taro设计的bug

报错信息

系统信息
Taro v1.3.12

• 操作系统: [Windows 10]
• Taro 版本 [v1.3.12]
• Node.js 版本 [v10.16.3]
• 报错平台 [weapp]

[taro-bot]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Chen-jj]

@zhcxk1998 贴一下编译后的 js

[zhcxk1998]

@zhcxk1998 贴一下编译后的 js

好的好的，不好意思一直没用看到回复。是贴一下单这个页面编译后的js文件吗？

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _assign = require("../../../npm/babel-runtime/core-js/object/assign.js");

var _assign2 = _interopRequireDefault(_assign);

var _regenerator = require("../../../npm/babel-runtime/regenerator/index.js");

var _regenerator2 = _interopRequireDefault(_regenerator);

var _asyncToGenerator2 = require("../../../npm/babel-runtime/helpers/asyncToGenerator.js");

var _asyncToGenerator3 = _interopRequireDefault(_asyncToGenerator2);

var _getPrototypeOf = require("../../../npm/babel-runtime/core-js/object/get-prototype-of.js");

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require("../../../npm/babel-runtime/helpers/classCallCheck.js");

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require("../../../npm/babel-runtime/helpers/createClass.js");

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require("../../../npm/babel-runtime/helpers/possibleConstructorReturn.js");

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _get2 = require("../../../npm/babel-runtime/helpers/get.js");

var _get3 = _interopRequireDefault(_get2);

var _inherits2 = require("../../../npm/babel-runtime/helpers/inherits.js");

var _inherits3 = _interopRequireDefault(_inherits2);

var _class, _temp2;

var _tslib = require("../../../npm/tslib/tslib.js");

var tslib_1 = _interopRequireWildcard(_tslib);

var _index = require("../../../npm/@tarojs/taro-weapp/index.js");

var _index2 = _interopRequireDefault(_index);

var _index3 = require("../../../npm/@tarojs/mobx/index.js");

function _interopRequireWildcard(obj) {
  if (obj && obj.__esModule) {
    return obj;
  } else {
    var newObj = {};if (obj != null) {
      for (var key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key];
      }
    }newObj.default = obj;return newObj;
  }
}

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

var ChatRoom = (_temp2 = _class = function (_BaseComponent) {
  (0, _inherits3.default)(ChatRoom, _BaseComponent);

  function ChatRoom() {
    var _ref;

    var _temp, _this, _ret;

    (0, _classCallCheck3.default)(this, ChatRoom);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = (0, _possibleConstructorReturn3.default)(this, (_ref = ChatRoom.__proto__ || (0, _getPrototypeOf2.default)(ChatRoom)).call.apply(_ref, [this].concat(args))), _this), _this.$usedState = ["anonymousState__temp", "messageList", "loopArray62", "scrollViewId", "to", "message", "chatroomStore"], _this.config = {
      navigationBarTitleText: '聊天室'
    }, _this.customComponents = [], _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
  }

  (0, _createClass3.default)(ChatRoom, [{
    key: "_constructor",
    value: function _constructor(props) {
      (0, _get3.default)(ChatRoom.prototype.__proto__ || (0, _getPrototypeOf2.default)(ChatRoom.prototype), "_constructor", this).call(this, props);
      /**
       * 指定config的类型声明为: Taro.Config
       *
       * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
       * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
       * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
       */

      this.state = {
        message: ''
      };
      this.$$refs = [];
    }
  }, {
    key: "componentWillMount",
    value: function () {
      var _ref2 = (0, _asyncToGenerator3.default)( /*#__PURE__*/_regenerator2.default.mark(function _callee() {
        var title;
        return _regenerator2.default.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                title = this.$router.params.title;

                _index2.default.setNavigationBarTitle({
                  title: title
                });

              case 2:
              case "end":
                return _context.stop();
            }
          }
        }, _callee, this);
      }));

      function componentWillMount() {
        return _ref2.apply(this, arguments);
      }

      return componentWillMount;
    }()
  }, {
    key: "handleMessageSend",
    value: function handleMessageSend() {
      var _props$chatroomStore = this.props.chatroomStore,
          handleMessageSend = _props$chatroomStore.handleMessageSend,
          socketId = _props$chatroomStore.socketId;
      var message = this.state.message;
      var to = this.$router.params.to;

      handleMessageSend({
        type: 'text',
        from: socketId,
        to: to,
        message: message
      });
      this.setState({
        message: ''
      });
    }
  }, {
    key: "handleChange",
    value: function handleChange(_ref3) {
      var value = _ref3.detail.value;

      this.setState({ message: value });
    }
  }, {
    key: "_createData",
    value: function _createData() {
      this.__state = arguments[0] || this.state || {};
      this.__props = arguments[1] || this.props || {};
      var __isRunloopRef = arguments[2];
      var __prefix = this.$prefix;
      ;

      var _props$chatroomStore2 = this.__props.chatroomStore,
          messageList = _props$chatroomStore2.messageList,
          scrollViewId = _props$chatroomStore2.scrollViewId;
      var message = this.__state.message;
      var to = this.$router.params.to;

      var anonymousState__temp = (0, _index.internal_inline_style)({ height: '100px' });
      var loopArray62 = messageList[to] ? messageList[to].map(function (messageInfo, _anonIdx) {
        messageInfo = {
          $original: (0, _index.internal_get_original)(messageInfo)
        };

        var _messageInfo$$origina = messageInfo.$original,
            message = _messageInfo$$origina.message,
            messageId = _messageInfo$$origina.messageId;

        return {
          messageId: messageId,
          $original: messageInfo.$original
        };
      }) : [];
      (0, _assign2.default)(this.__state, {
        anonymousState__temp: anonymousState__temp,
        messageList: messageList,
        loopArray62: loopArray62,
        scrollViewId: scrollViewId,
        to: to
      });
      return this.__state;
    }
  }]);
  return ChatRoom;
}(_index.Component), _class.$$events = ["handleChange", "handleMessageSend"], _class.$$componentPath = "client/pages/chatroom/index", _temp2);
ChatRoom = tslib_1.__decorate([(0, _index3.inject)('chatroomStore'), _index3.observer], ChatRoom);
exports.default = ChatRoom;

Component(require('../../../npm/@tarojs/taro-weapp/index.js').default.createComponent(ChatRoom, true));