如何使用React 16.8 Hook适当获取项目索引？

Question

我正在使用React 16 Hooks练习待办事项列表项目。但是，我发现很难像这样在map（）函数内部获取索引：

父代待办事项：

const Todo = () => {
    const dispatch = useDispatch();
    const { list } = useSelector(state => state.todoReducer.toJS());
    const [value, setValue] = useState('');

    function handleOnchange (e) {
        setValue(e.target.value)
    }

    function handleAddItem() {
        actionCreators.addItem(dispatch, value);
        setValue('');
    }

    function handleRemoveItem(index) {
        // if use handleChecked(index) will trigger  handleItemChecked and printed all //indexes everytime
        actionCreators.removeItem(dispatch, value);
    }

    function handleItemChecked(index) {
        console.log(index)
    }

    return (
        <>
          <input type="text" value={value} onChange={handleOnchange} />
          <button onClick={handleAddItem}>+</button>
          <List items={list} handleClick={handleRemoveItem} isCompeted={false} handleChecked={handleItemChecked}/>
        </>
    )
}

子组件：

    const List = ({items, handleClick, isCompleted, handleChecked}) => {
   return (
       <ListWrapper>
         {items && items.length > 0 && items.map((item, index) => {
             return (
                 <ListWrapper.item key={`${item}${new Date()}${Math.random()}`}>
                 {/* if like this: onClick={handleChecked(index)} will cause the issue */}
                    {/* <li>{item}<input type="checkbox" onClick={handleChecked(index)}/></li> */}
                    <li>{item}<input type="checkbox" name={index} onClick={e => handleChecked(e.target.name)}/></li>
                    <button onClick={handleClick}>-</button>
                 </ListWrapper.item>
            );
         })}
       </ListWrapper>
   )
}

我发现是否在子组件中：列表，如果需要获取项目的索引，则必须分配name = {index}。如果直接使用handleChecked（index），将导致其父组件（Todo）出现很多渲染问题。有没有更好的方法来处理这种情况？非常感谢您！