多重map中使用临时变量与三元表达式，编译结果错误

[imageslr]

多层map的情况下，当里层map引用外层map的变量时，编译过程中的临时变量$loopState__tempX编译错误。

示例代码：下面是一个render函数中的部分代码：

const types = ['all','ongoing']
{types.map((type, index) => {
  const { data } = this.props[type]; // 外层map定义一个临时变量
  return (
    current == index && (
      <ActivityContainer>
         {data && data.length ? ( // 这里有一个条件判断，引用了外层map变量
            data.map(item => {
              return (
                <View style={{ // 内层map也有一个临时变量
                          width: fontSizeBase,
                          height: fontSizeBase,
                          lineHeight: fontSizeBase
                }}>
                          // ...后面省略
                          // ...后面省略
                          // ...后面省略

内层map用到一个临时变量：

{
  width: fontSizeBase,
  height: fontSizeBase,
  lineHeight: fontSizeBase
}

查看该部分View的编译结果：

<view style="{{item.$loopState__temp7}}" />

编译后的js：

var loopArray0 = types.map(function(type, index) {
            type = {
              $original: (0, _index.internal_get_original)(type)
            };

            var data = _this4.__props[type.$original].data; // 外层map的临时变量，正常
   // ...
            // 内层map的临时变量
            var $loopState__temp7 =
                      current == index
                        ? type.data && type.data.length // 这里的type中实际上并不包含data属性
                          ? {
                              width: fontSizeBase,
                              height: fontSizeBase,
                              lineHeight: fontSizeBase
                            }
                          : null
                        : null;

如上，我期望$loopState__temp7是style对象，但是最终结果是null。原因是三元表达式中的第二个条件编译错误。

如果我在render函数中先将style保存为一个变量，就不会出现这个问题：

render() {
    const { current } = this.state;
    const types = [TYPE_ALL, TYPE_ONGOING];

    const fontSizeBase = Taro.pxTransform(28);

    const style = {
      width: fontSizeBase,
      height: fontSizeBase,
      lineHeight: fontSizeBase
    };

// ... 省略
// map函数中：
                <View style={style} />

我的想法：

似乎在map中不在本map函数作用域中的变量的时候，会默认它是map的回调函数的第一个参数的属性？感谢您解答。

[taro-bot]

欢迎提交 Issue~

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

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

Good luck and happy coding~

[taro-bot]

CC @yuche

[yuche]

非常详尽的 issue，感谢

[imageslr]

您好，还有一个类似的问题，如下所示：

   render() {
    const { current } = this.state;
    const types = [TYPE_ALL, TYPE_ONGOING];
   // const data = [this.props[TYPE_ALL].data, this.props[TYPE_ONGOING].data];

    return (
      <View className='container'>
        <View className='header'>
          <AtSegmentedControl
            values={["全部", "进行中"]}
            onClick={this.onClickTabs}
            current={current}
          />
        </View>
        {types.map((type, index) => {
          return (
            <ActivityContainer
              isLoading={this.state[type].isLoading}
              isError={this.state[type].isError}
              onReload={() => this.fetchData(type)}
              minHeight='80vh'
              key={type}
            >
              <List data={this.props[type].data} type={type} /> // 这里
            </ActivityContainer>
          );
        })}
      </View>
    );
  }

List组件的data props 始终是null，即this.props无法使用this.props[type]这种方式获取到this.props.all或者this.props.ongoing的值。但是this.state却可以。

两个List组件打印出来的data为：

如果将上述代码改为：

  render() {
    const { current } = this.state;
    const types = [TYPE_ALL, TYPE_ONGOING];
    const data = [this.props[TYPE_ALL].data, this.props[TYPE_ONGOING].data];

    return (
      <View className='container'>
        <View className='header'>
          <AtSegmentedControl
            values={["全部", "进行中"]}
            onClick={this.onClickTabs}
            current={current}
          />
        </View>
        {types.map((type, index) => {
          return (
            <ActivityContainer
              isLoading={this.state[type].isLoading}
              isError={this.state[type].isError}
              onReload={() => this.fetchData(type)}
              minHeight='80vh'
              key={type}
            >
              <List data={data[index]} type={type} />
            </ActivityContainer>
          );
        })}
      </View>
    );
  }

问题得以解决。两个List组件打印出来的data为：

[yuche]

第二个问题你需要显示写this.props.xxx 才能用到 xxx。文档有说明：
https://nervjs.github.io/taro/docs/best-practice.html#%E7%BB%99%E7%BB%84%E4%BB%B6%E8%AE%BE%E7%BD%AE-defaultprops

最新的 beta 版本就没有这个限制。

[imageslr]

非常感谢