引起违规错误。 React缩小错误#31

问题描述 投票:0回答:1

React-dom.production.min.js:4408不变违规:缩小反应 错误#31;访问

https://reactjs.org/docs/error-decoder.html?infariant = 31&args [] = object%20WITH%20Keys%20%7Bessage%7D&args [] =

全部消息或使用非限制的开发环境进行完整 错误和其他有用的警告。 **

challengelist

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) challenge

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)

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

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

export default Grid

当您看到这样的错误时,您可以访问建议查看完整错误的页面。因此,打开

https://reactjs.org/docs/error-decoder.html?nofriant = 31&args [] = object%20 with%20 keys%20%7Bessage%7D&args []

Objects are not valid as a React child (found: object with keys {message}). If you meant to render a collection of children, use an array instead.
javascript reactjs
1个回答
0
投票
当您渲染一个不是字符串,数字,布尔值或其中的组件。检查您的道具,并在其中找到一个带有“消息”键的对象的道具,然后您会知道您正在尝试不正确地渲染什么。

© www.soinside.com 2019 - 2024. All rights reserved.