Having trouble with react error: 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead'

Question

我正在创建一个带有 Django 后端的 React 应用程序，并使用 Redux 来维护状态。我正在尝试在子组件中呈现数据，但我不断收到此错误：Objects are not valid as a React child (found: object with keys {id, sets, reps, weight, bridge_id}). If you meant to render a collection of children, use an array instead.

我有一个主屏幕 RoutineScreen.js，它应该呈现显示例程中的练习的子组件以及每个组件、重复次数和重量。

我的代码是这样的：

function RoutineScreen() {
    // Get routine id which is passed in through program screen components
    const { id } = useParams()
    const routine_id = id

    //Extract program id from routine
    const state = {...store.getState()}
    let program_id

    // -- set routines, which we will loop through to find program id
    const routines = state.programRoutines.routines

    // -- loop through routines, find match for routine_id
    for (let i in routines) {
        if (i.id == routine_id){
            program_id = i.program
        }
    }

    const dispatch = useDispatch()

    const routineExercises = useSelector(state => state.routineExercises)
    const { error, loading, exercises } = routineExercises

    useEffect(() => {

        dispatch(listRoutineExercises(program_id, routine_id))

    }, [dispatch])

    return (
        <div className="screen-container">
            <Header/>

            <SearchBar/>

            <div className="card-container">
                {exercises.map((exercise, index) => (
                    // Render Routines
                    <Exercise key={exercise.id} routine_id={routine_id} index={index} exercise={exercise}/>
                ))}
            </div>
        </div>
    )
}

export default RoutineScreen

function Exercise({ exercise, routine_id, index }) {
    // Get routine id which was passed in through program screen components
    const { id } = useParams()
    const exercise_id = id

    const dispatch = useDispatch()

    // use spread operator to unpack elements from exerciseParameters
    const exerciseParameters = useSelector(state => state.exerciseParameters)
    const { error, loading, parameters } = exerciseParameters

    useEffect(() => {

        dispatch(listExerciseParams(routine_id, exercise_id))

    }, [dispatch])

    return (
        <div style={{ textDecoration: 'none' }}>
            <div>
                <h3>{exercise.name} </h3>
                <h4>{parameters[index].reps}</h4>
                <h4>{parameters[index].weight}</h4>
            </div>
        </div>
    )
}

export default Exercise

这是我的数据：

注意：我是 React 和 Redux 的新手，所以请随时告诉我是否还有关于如何修复我的代码的任何其他建议，或者我是否遗漏了任何相关信息这个问题。谢谢！

我尝试使用 parameters[index].reps 访问对象中的特定元素，期望它随后会显示该数据，但我收到了上述错误。

Answer 1

我想你可以这样做：

return(
    <div style={{ textDecoration: 'none' }}>
        <div>
            <h3>{exercise.name} </h3>
            {parameters.map(parameter => (
                <>
                    <h4>{parameter.reps}</h4>
                    <h4>{parameter.weight}</h4>
                </>
            ))}
        </div>
    </div>
)

Having trouble with react error: 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead'

Having trouble with react error: 'Objects are not valid as a React child. If you meant to render a collection of children, use an array instead'

reactjs

redux

react-redux

react-hooks

redux-form