render函数不能多层循环嵌套渲染

[miroku-y]

在你这个项目/src/pages/discovery/discovery.js上，feed数组中每一项再加一个子数组subFeed，但feed不是固定写好的，是请求返回的，到render中map两次，subFeed就无法渲染。

feed:[
        {
            'question_id': 1,
            'answer_id': 3,
            'feed_source_id': 23,
            'feed_source_name': 'Rebecca1',
            'feed_source_txt': '赞了回答1',
            'feed_source_img': img4,
            'question': '选择 Kindle 而不是纸质书的原因是什么？',
            'answer_ctnt': '难道不明白纸质书更贵啊！！！ 若觉得kindle更贵，我觉得要么阅读量太少，那确实没有买kindle的必要。要么买的都是盗版的纸质书？我不清楚不加以评论。。。 另外，用kindle看小说的怎么真心不懂了...',
            'good_num': '112',
            'comment_num': '18',
            'subFeed':[
                  {
                           subname:'taro',
                           subvalue:'cc'
                  }
            ]
        }
]

在render中，循环输出feed时，再循环subFeed,无法渲染？？？

[luckyadam]

能不能贴一下你的代码

[miroku-y]

大概是下面这样：

import Taro, { Component } from '@tarojs/taro'
import { ScrollView, View, Text, Image, Video } from '@tarojs/components'
import './index.scss'
import eventProxy from '../../utils/eventProxy'
import SubVideos from '../../components/home/index'
import bilibili from '../../images/bilibili.png'
import douyin from '../../images/douyin.png'
import huoshan from '../../images/huoshan.png'
import kuaishou from '../../images/kuaishou.png'
import meipai from '../../images/meipai.png'
import miaopai from '../../images/miaopai.png'
import xigua from '../../images/xigua.png'

const url = "http://www.bilibili.com/video/av32477197"
const images = [
  { name: '抖音', url: douyin, platform: '58664008125', key: 'douyin' },
  { name: '快手', url: kuaishou, platform: '58047835859', key: 'kuaishou' },
  { name: 'bilibili', url: bilibili, platform: '84064249580', key: 'bilibili' },
  { name: '美拍', url: meipai, platform: '84064249580', key: 'meipai' },
  { name: '秒拍', url: miaopai, platform: '61525688535', key: 'miaopai' },
  { name: '西瓜视频', url: xigua, platform: '97185840630', key: 'xigua' },
  { name: '火山小视频', url: huoshan, platform: '57720812347', key: 'huoshan' },
]
const platforms = {
  58664008125: 'douyin',
  58047835859: 'kuaishou',
  84064249580: 'bilibili',
  84064249580: 'meipai',
  61525688535: 'miaopai',
  97185840630: 'xigua',
  57720812347: 'huoshan'
}
const videos = {
  douyin: [],
  kuaishou: [],
  bilibili: [],
  meipai: [],
  miaopai: [],
  xigua: [],
  huoshan: []
}
const videoUrl = {
  douyin: 58664008125,//钟婷
  kuaishou: 58047835859,//m
  bilibili: 84064249580,//忠
  meipai: 84064249580,//许
  miaopai: 61525688535,//大海
  xigua: 97185840630,//小可爱
  huoshan: 57720812347//莉
}

//定义一个大的数组，刚开始只有默认的抖音，滚动加载后不断的往数组中push下一组数据 (试了一下，不渲染)
const source = [
  { name: '抖音', url: douyin, platform: '58664008125', key: 'douyin', list: [] },
]
export default class Index extends Component {

  config = {
    navigationBarTitleText: '首页'
  }

  constructor(props) {
    super(props)
    this.state = {
      platform: '58664008125',
      targetClass: 'douyin',
      source: source
      // ...videos
    }
  }
  componentWillMount() { }

  componentDidMount() {
    let me = this;
    this.getVideo();
    //设置滚动加载；
    let observer = wx.createIntersectionObserver();
    console.log(observer)
    observer.relativeToViewport({ bottom: 40 }).observe(`.${this.state.targetClass}`, function (res) {
      console.log(res)
      //判断intersectionRatio为0到底了，1上去了
      if (!res.intersectionRatio) {
        me.setState({
          ...this.state,
          platform: '58047835859'
        }, () => {
          me.getVideo()
        })
      }

    })
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  getVideo = () => {

    //加载视频
    //本来加载卡斯数据的video,视频做了防盗链处理，播放不了

    Taro.request({
      url: ` https://api.data.caasdata.com/videos/platforms/${this.state.platform}/home_page`
    }).then((res) => {
      source.map((item) => {
        if (item.platform === this.state.platform) {
          item.list = res.data
          this.setState({
            ...this.state,
            [platforms[this.state.platform]]: res.data.slice(0, 5)
          }, () => {
            console.log(this.state)

          })
        }
      })

    })
  }
  render() {
    console.log(this.state[platforms[this.state.platform]])
    return (
      <View className='index'>
        {
          this.state.source.map((item) => {
            return (
              <View className='square_group'>
                {
                  item.platform === this.state.platform ? <View className='title'>
                    <Image src={item.url} className={`images_icon ${this.state.targetClass}`}></Image>
                    <Text className='image_title'>{item.name}</Text>
                  </View> : ''
                }
                <View className='video'>
                  {
                    item.list.map((sub) => {
                      return (
                        <View>{sub.name}</View>
                      )
                    })
                  }
                </View>
              </View>
            )
          })
        }
      </View>
    )
  }
}

[liang-kai]

同样遇到