Javascript 不变违反错误。反应最小化错误#31

我正在呈现一个挑战列表，它可以在我的本地服务器上运行。但当我将其部署到Netlify时，控制台上会出现一些错误。我的代码有什么问题

**

react dom.production.min.js:4408不变冲突：缩小的react 错误#31；参观 获取完整消息，或使用非小型开发环境获取完整消息 错误和其他有用的警告。 **

挑战者

import React，{useffect}来自“React”
从“react-redux”导入{useSelector，useDispatch}
//Utils和API
从“../../../utils/period converter”导入周期转换器
从“../../API/challenges/fetchChallenges”导入fetchChallenges
导入从“../../../utils/is challenge visible”可见
//组成部分
从“../Challenge”导入质询
从“../../../hoc/Grid”导入网格
常量挑战者=道具=>{
//身份验证令牌
const-token=localStorage.getItem（'x-auth-token'）
//贮藏
const dispatch=usedpatch（）
const challenges=useSelector（state=>state.challenges.all）
const visibleChallenges=useSelector（state=>state.challenges.visible）
const providedchallenges=（）=>{
return-fetchChallenges（令牌，（错误，挑战）=>{
if（err）返回console.log（err）
分派（{type:'SET_CHALLENGES'，CHALLENGES}）
})
}
常量过滤器挑战=（）=>{
让[u visibleChallenges=[]
让[u hiddenChallenges=[]
如果（挑战。长度）{
challenges.map（challenge=>{
if（isVisible（challenge））\u visibleChallenges.push（challenge）
else\u隐藏挑战。推送（挑战）
})
分派（{type:'SET_VISIBLE_CHALLENGES'，CHALLENGES:_visibleChallenges}）
分派（{type:'SET_HIDDEN_CHALLENGES'，CHALLENGES:_hiddenChallenges}）
}
} 
//组件没有安装
useffect（（）=>{
如果（令牌）{
提供挑战（）
}    
}, [])
//已更新挑战。将其筛选为可见和隐藏
useffect（（）=>{
过滤器挑战（）
}[挑战]）
返回(
{
可见长度
？visibleChallenges.map（挑战=>{
常量周期=周期转换器（挑战周期）
返回
})
：没有什么要做的

}
)
}
导出默认的React.memo（ChallengeList）

挑战

import React，{useffect，useState}来自“React”
从“react redux”导入{useDispatch}
从“时刻”导入时刻
//Utils和API
从“../../../utils/timer”导入计时器
从“../../API/challenges/update challenge”导入updateChallenge
从“../../API/states/update state”导入updateState
从“../../../utils/is challenge visible”导入{isChallengeDay，isChallengePeriod}”
//风格
导入“./style.scss”
//图像
从“../../../assets/images/challenges/breakfast.gif”导入breakfastImage
从“../../../assets/images/challenges/brushing.gif”导入brushingImage
从“../../../assets/images/challenges/candyday.gif”导入candyday图像
从“../../assets/images/challenges/sunch.gif”导入午餐图像
从“../../../assets/images/challenges/milk.gif”导入奶制品
从“../../assets/images/challenges/sleeping.png”导入sleepingImage
从“../../../assets/images/challenges/wakeup.gif”导入wakeupImage
常量图像={
早餐：早餐，
刷：刷图像，
candyday:candydayImage，
午餐：午餐图片，
牛奶：牛奶，
睡眠：睡眠图像，
唤醒：唤醒图像
}
常量挑战=道具=>{
//身份验证令牌
const-token=localStorage.getItem（'x-auth-token'）
//调度函数以设置挑战
const dispatch=usedpatch（）
//声明变量以保持组件的可见性
让可见=真实
/*陈述*/
const[day，setDay]=useState（矩（）.format（'dddd'））
const[time，setTime]=useState（矩（）.format（'HH:mm:ss'））
常量[leftTime，setLeftTime]=useState（'00:00:00'）
/*缩略图*/
const image=images[props.image.toLowerCase（）.split（'.'）[0]]
/*设置捕捉挑战的当前日期、当前时间和剩余时间*/
常量时间处理程序=（）=>{
//设置当前时间和日期
const_day=moment（）.格式（'dddddd'）
常量时间=力矩（）.格式（'HH:mm:ss'）
设定日
设置时间（_时间）
//如果存在周期，则计算剩余时间
如果（道具周期）{
常量timerOutput=计时器（道具周期[0]，道具周期[1]）
setLeftTime（timerOutput）
}
}
const challengeCompleted=（）=>{
const today=moment（）.格式（'YYYY-MM-DD'）
const body={completedDate:today}
updateChallenge（道具id、主体、令牌，（错误、挑战）=>{
if（err）返回console.log（err）
派遣({
键入：“添加隐藏的挑战”，id:CHALLENGE.data.\u id
})
常量负载={name:'total'，状态：challenge.data.pointAmount，操作：'rease'}
UpdateEstate（有效负载、令牌、（错误、文档）=>{
if（err）返回console.log（err）
分派（{type:'SET_TOTAL_POINT'，POINT:doc.state}）
})
})
}
//组件安装
useffect（（）=>{
const intervalTimer=setInterval（timeHandler，1000）
//在componentDidUnmount之前，请重置计时器
return（）=>{
清除间隔（间隔计时器）
}
}, [])
//componentDidUpdate:日期已更改
//更新挑战，无论挑战是否在当天
useffect（（）=>{
if（可见和道具日和挑战日）{
分派（{type:'ADD_HIDDEN_CHALLENGE'，id:props._id}）
}
否则如果（！visible&&props.day&&isChallengeDay（props.day，day））{
分派（{type:'ADD_VISIBLE_CHALLENGE'，id:props._id}）
}
}，[天]）
//componentDidUpdate:时间已更改
//更新挑战，无论挑战是否在有效期内
useffect（（）=>{
如果（可见的&&props.period&&isChallengePeriod（props.period，time））{
分派（{type:'ADD_HIDDEN_CHALLENGE'，id:props._id}）
}
否则，如果（！visi
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

// Utils and API
import periodConverter from '../../../utils/period-converter'
import fetchChallenges from '../../../API/challenges/fetch-challenges'
import isVisible from '../../../utils/is-challenge-visible'

// Components
import Challenge from '../Challenge'
import Grid from '../../../hoc/Grid'

const ChallengeList = props => {
  // Auth token
  const token = localStorage.getItem('x-auth-token')

  // Store
  const dispatch = useDispatch()  
  const challenges = useSelector(state => state.challenges.all)
  const visibleChallenges = useSelector(state => state.challenges.visible)

  const provideChallenges = () => {
    return fetchChallenges(token, (err, challenges) => {
      if (err) return console.log(err)      
      dispatch({ type: 'SET_CHALLENGES', challenges })
    })
  }

  const filterChallenges = () => {
    let _visibleChallenges = []
    let _hiddenChallenges = []

    if (challenges.length) {
      challenges.map(challenge => {
        if (isVisible(challenge)) _visibleChallenges.push(challenge)
        else _hiddenChallenges.push(challenge)        
      })
      dispatch({ type: 'SET_VISIBLE_CHALLENGES', challenges: _visibleChallenges })
      dispatch({ type: 'SET_HIDDEN_CHALLENGES', challenges: _hiddenChallenges })
    }
  } 

  // Component did mount
  useEffect(() => {
    if ( token ) {
      provideChallenges()    
    }    
  }, [])

  // Challenges updated. Filter them as visible and hidden
  useEffect(() => {
    filterChallenges()    
  }, [challenges])  

  return (
    <Grid>
      {
        visibleChallenges.length
        ? visibleChallenges.map(challenge => {
            const period = periodConverter(challenge.period)

            return <Challenge
                    key={challenge._id}
                    _id={challenge._id}
                    name={challenge.name}
                    image={challenge.image}
                    info={challenge.imageInfo}
                    period={period}
                    pointAmount={challenge.pointAmount}
                    day={challenge.day}
                  />      
        })
        : <p>There is no any todo!</p>
      }
    </Grid>
  )
}

export default React.memo(ChallengeList)

import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import moment from 'moment'

// Utils and API
import timer from '../../../utils/timer'
import updateChallenge from '../../../API/challenges/update-challenge'
import updateState from '../../../API/states/update-state'
import { isChallengeDay, isChallengePeriod } from '../../../utils/is-challenge-visible'

// Style
import './style.scss'

// Images
import breakfastImage from '../../../assets/images/challenges/breakfast.gif'
import brushingImage from '../../../assets/images/challenges/brushing.gif'
import candydayImage from '../../../assets/images/challenges/candyday.gif'
import lunchImage from '../../../assets/images/challenges/lunch.gif'
import milkImage from '../../../assets/images/challenges/milk.gif'
import sleepingImage from '../../../assets/images/challenges/sleeping.png'
import wakeupImage from '../../../assets/images/challenges/wakeup.gif'

const images = {
  breakfast: breakfastImage,
  brushing: brushingImage,
  candyday: candydayImage,
  lunch: lunchImage,
  milk: milkImage,
  sleeping: sleepingImage,
  wakeup: wakeupImage
}

const Challenge = props => {
  // Auth Token
  const token = localStorage.getItem('x-auth-token')

  // Dispatch function to set challenges
  const dispatch = useDispatch()

  // Declare a variable to keep visibility of component
  let visible = true

  /* State */
  const [day, setDay] = useState(moment().format('dddd'))
  const [time, setTime] = useState(moment().format('HH:mm:ss'))
  const [leftTime, setLeftTime] = useState('00:00:00')

  /* Thumbnail Image */  
  const image = images[props.image.toLowerCase().split('.')[0]]

  /* Sets current day, current time and left time to catch the challenge */
  const timeHandler = () => {
    // Set current time and day
    const _day = moment().format('dddd')
    const _time = moment().format('HH:mm:ss')

    setDay(_day)
    setTime(_time)

    // If period exist, calculate left time
    if (props.period) {
      const timerOutput = timer(props.period[0], props.period[1])
      setLeftTime(timerOutput)
    }
  }

  const challengeCompleted = () => {
    const today = moment().format('YYYY-MM-DD')
    const body = { completedDate: today }

    updateChallenge(props._id, body, token, (err, challenge) => {
      if (err) return console.log(err)

      dispatch({
        type: 'ADD_HIDDEN_CHALLENGE', id: challenge.data._id
      })

      const payload = { name: 'total', state: challenge.data.pointAmount, action: 'increase' }

      updateState(payload, token, (err, doc) => {
        if (err) return console.log(err)
        dispatch({ type: 'SET_TOTAL_POINT', point: doc.state })
      })
    })
  }

  // componentDidMount
  useEffect(() => {
    const intervalTimer = setInterval(timeHandler, 1000)

    // before componentDidUnmount, reset the timer
    return () => {
      clearInterval(intervalTimer)
    }
  }, [])

  // componentDidUpdate : day has changed
  // Update the challenges whether challenge is on day or not
  useEffect(() => {
    if (visible && props.day && !isChallengeDay(props.day, day)) {
      dispatch({ type: 'ADD_HIDDEN_CHALLENGE', id: props._id })
    }
    else if (!visible && props.day && isChallengeDay(props.day, day)) {
      dispatch({ type: 'ADD_VISIBLE_CHALLENGE', id: props._id })
    }
  }, [day])

  // componentDidUpdate : time has changed
  // Update the challenges whether challenge is on period or not
  useEffect(() => {
    if (visible && props.period && !isChallengePeriod(props.period, time)) {
      dispatch({ type: 'ADD_HIDDEN_CHALLENGE', id: props._id })
    }
    else if (!visible && props.period && isChallengePeriod(props.period, time)) {
      dispatch({ type: 'ADD_VISIBLE_CHALLENGE', id: props._id })
    }
  }, [time])

  // componentDidUpdate (time or points is changed)
  useEffect(() => {

  }, [leftTime])  

  return visible === true 
    ? <div className='challenge'>
        {/* Image */}
        <div className='challenge__image'>
          <img src={image} alt={props.info} />
        </div>

        {/* Footer */}
        <div className='challenge__footer'>
          {/* Timer */}
          <div> { props.period.length > 0 && leftTime } </div>

          {/* Point Amount */}
          <div className='challenge__pointAmount'>          
            {props.pointAmount} <i className='fa fa-heart' />
          </div>

          {/* Button */}
          <div className='challenge__button' onClick={challengeCompleted}>
            <i className='fa fa-check' />
          </div>
        </div>
      </div>    
    : null
}

export default React.memo(Challenge)

import React from 'react'
import './style.scss'

const Grid = props => {
  return <div className='grid bg-primary'> {props.children} </div>
}

export default Grid