Реагируйте крюками. Как передать аргументы от одного элемента к другому - PullRequest
Новая
       3

Реагируйте крюками. Как передать аргументы от одного элемента к другому

2 голосов
/ 01 февраля 2020

Salute. Я перемещаю простой todoApp из компонентов в крючки. Итак, вот вопрос: я создаю средство удаления из массива задач в моем файле приложения. js (самый высокий) и передаю его другому компоненту.

Итак, вот оно: 

const App = () => {
  const [todoData, onDeleted] = useState([
    { label: "Drink Coffee", important: false, id: 1 },
    { label: "Make Awesome App", important: true, id: 2 },
    { label: "Have a lunch", important: false, id: 3 }
  ]);

  const deleteHandler = id => {
    todoData.filter(obj => obj.id !== id);
  };
  return(
      <TodoList todos={todoData} onDeleted={onDeleted(id => deleteHandler(id)))} />
)

В todo-list. js я делаю это. 

      <li key={id} className="list-group-item">
        <TodoListItem {...itemProps} onDeleted={() => onDeleted()} />
      </li>

В todo-list-item. js Я делаю это: 

<button
        type="button"
        className="btn btn-outline-danger btn-sm float-right"
        onClick={onDeleted}
      >

Итак ... На самом деле я не знаю, как правильно передать идентификатор элемента для удаления обработчика, также я получаю 'TypeError: Невозможно прочитать свойство' filter 'of undefined'. Что я делаю не так и как я могу это исправить?

1 Ответ

1 голос
/ 01 февраля 2020

Лучший способ добиться удаления состоит в том, чтобы сделать что-то вроде этого: 

const App = () => {
  // Renamed onDeleted to setTodoData, to keep code cleaner.
  const [todoData, setTodoData] = useState([
    { label: "Drink Coffee", important: false, id: 1 },
    { label: "Make Awesome App", important: true, id: 2 },
    { label: "Have a lunch", important: false, id: 3 }
  ]);

  const onDeleted = id => {
    setTodoData(todoData => todoData.filter(obj => obj.id !== id));
  };

  // Avoid passing anonymous functions as props, it may trigger re-renders and worsen performance.
  return (
      <TodoList todos={todoData} onDeleted={onDeleted} />
  );
}

// Make sure to pass id here, I assume it's in itemProps, replaced the anonymous function with some prop drilling.
<li key={id} className="list-group-item">
  <TodoListItem {...itemProps} onDeleted={onDeleted} />
</li>

А теперь для части кнопки (при условии, что id существует на подпорках): 

const deleteItem = () => {
  props.onDeleted(props.id);
};

<button
  type="button"
  className="btn btn-outline-danger btn-sm float-right"
  onClick={deleteItem}
>

Как правило, чтобы избежать проблемы с бурением пропеллера (пропуская один и тот же пропел через несколько компонентов), я бы предложил использовать Redux (с его замечательными хуками, такими как useSelector и useDispatch). Кроме того, избегайте передачи анонимных функций в свойства компонентов.

...