React-Redux 组件未显示

Question

我目前正在通过制作一个简单的待办事项列表来练习 React 和 Redux，您可以在其中检查项目是否完整。 我正在尝试实现一个基本按钮来测试我的代码是否可以将 Todo 项切换为完整或不完整。 我正在尝试在 AllTodos.js 内的 Todo 组件内呈现一个按钮（ToggleBox.js），但该框似乎没有出现在 map function 但是如果我放置在 map function 之外，它确实会显示出来。

任何有关为什么会发生这种情况的帮助将不胜感激。 我将发布下面两个文件中的代码。

谢谢你，利亚姆

AllTodos.js：

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { loadData, selectAllTodos, toggleTodo } from './allTodosSlice';
import { Todo } from '../../components/Todo';
import { ToggleBox } from '../../components/ToggleBox';

export const AllTodos = () => {
const allTodos = useSelector(selectAllTodos);
const dispatch = useDispatch();

const onFirstRender = () => {
    dispatch(loadData());
}

useEffect(onFirstRender, []);

const onToggleTodoHandler = (todo) => {
    dispatch(toggleTodo(todo));
}

return (
    <div>
        {allTodos.map((todo) => (
            <Todo todo={todo} complete={todo.completed} key={todo.id}>
                <ToggleBox
                    onClickHandler={() => onToggleTodoHandler(todo)}
                />
            </Todo>
        ))}
    </div>
)
}

切换框.js：

export const ToggleBox = ({ children, onClickHandler }) => {
return (
    <button className="check-box" onClick={onClickHandler}>
    </button>
)

}