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

}