猫眼电影H5app代码解决报错

在react项目中

data是一个对象

这个对象在放映厅排片信息列表要用到,就是遍历对象时用到
data: {
9-9: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
9-10: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
9-11: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
9-12: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
}

代码

  let [sum, setSum] = useState(0) //点击激活样式的赋值,相同为真就激活
  let [moviedom, setMoviedom] = useState([])  //列表
  let [indexings, setIndexings] = useState([])  //图片
  let [project, setProject] = useState([])  //放映厅排片信息列表

  var dic = 0
  // 初始化渲染轮播图
  useEffect(() => {
    $_celimainfo({ cid: param1 }).then(res => {
      setIndexings(res.data.data)
      setMoviedom(res.data.data[0])
      dic = res.data.data[0].id
      picture(dic)  //初始化排片信息列表

    })
  }, [])

//1.封装请求
 let picture = (num) => {
    $_celimamov({ cid: param1, mid: num }).then(res => {
      setProject(res.data.data)
    })
  }

 // 2.轮播图切换
  let interchange = (index) => {
    indexings.map((v, i) => {    //遍历图片列表中,判断当前变化的index和遍历中的下标是否相同,相同就赋值给setMoviedom
      // 在此处调用 interchange 函数，并传入需要的参数
      if (index === i) {
        picture(v.id)  //7.放映厅排片信息  开始时间+结束时间+2D  3D
        return setMoviedom(v)  //返回的影片性情,剧名+评分
      }
    })
  }

  // 3.点击日期,激活样式
  let setdate = (num) => {
    setSum(num)
  }

//--------------------------------------------------------------------------------------
return(

//日期标签
       <div className='schedule-date'>
          {Object.keys(project).length > 0 ? (       // 做判断,如果这个对象为空的话就返回<div>Loading...</div>
            Object.keys(project).map((v, i) => (

               //style={{ backgroundColor: i === sum ? '#f20e33' : '#fff' }}//激活样式

              <div className='schedule-date-day' key={i} style={{ backgroundColor: i === sum ? '#f20e33' : '#fff' }} onClick={() => setdate(i)}  >
              // {i === 0 && <span>今天</span>}  是根据下标判断,服务器返回多少数据,在动态渲染今天,明天......

                {i === 0 && <span>今天</span>}
                {i === 1 && <span>明天</span>}
                {i === 2 && <span>后天</span>}
                {i === 3 && <span>外天</span>}
                {i === 4 && <span>大外天</span>}
                {i === 5 && <span>大大外天天</span>}
                {i === 6 && <span>即今天</span>}
                {i === 7 && <span>即明天</span>}
                <p>{v}</p>
              </div>
            ))
          ) : (
            <div>Loading...</div>
          )}
        </div>

            //场次+开始结束时间列表
         <div className='schedule-session'>
          {/* 没有做判断前,刚进来的数据为空,来用map遍历时会报错,所以要先判断一下 */}
            {/* { project[Object.keys(project)[sum]] && project[Object.keys(project)[sum]]  */}
        {/* Uncaught TypeError: Cannot read properties of undefined (reading 'map') */}
          { project[Object.keys(project)[sum]] && project[Object.keys(project)[sum]].map(item => {

              return (
                <div className='schedule-session-info' key={item.id}>
                  <div className='session-empty' >
                    {/* 渲染对象数据 */}
                    <h3>{item.endtime}</h3>
                    <p>{item.starttime}散场</p>
                  </div>

                  <div className='session-emptyv'>
                    <p>{item.name}</p>
                    <p>{item.type}</p>
                  </div>

                  <h4>¥{item.price}</h4>
                  <div className='session-emptor'>
                    <div>购票</div>
                  </div>
                </div>
              )
            })}
        </div>

        )