Как правильно получить индекс предмета, используя React 16.8 Hook?

Question

Я практикую проект списка задач, используя React 16 Hooks. Однако я обнаружил, что трудно получить индекс с помощью внутренней функции map (), например:

Родительский компонент Todo:

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

Я обнаружил, если в дочернем компоненте: List, если мне нужно получить индекс элемента, я должен назначить name = {index}. Если использовать handleChecked (index) напрямую, многократно возникнет проблема рендеринга в его родительском компоненте (Todo). Есть ли лучший способ справиться с этим делом? Большое вам спасибо за продвинутый!

Answer 1

как прокомментировал jonrsharpe:

<button onClick={handleClick}>-</button>

вот 2 известных способа исправить это:

<button onClick={() => handleClick(index)}>-</button>

или

<button onClick={handleClick.bind(this, index)}>-</button>

читайте об этом: https://reactjs.org/docs/handling-events.html

надежда помогла:)