我正在渲染一个挑战列表，它可以在本地使用。但是，当我将其部署到Netlify时，在控制台上会出现一些错误。我的代码有什么问题？
**
react-dom.production.min.js：4408不变违规：最小化React 错误＃31;访问 https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bmessage%7D&args[]= 以获得完整消息或使用非最小化的dev环境获得完整消息 错误和其他有用的警告。 **
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