Вопрос к адептам функциональных компонетов. Как вот такой пример переписать

Question

Вопрос к адептам функциональных компонетов. Как вот такой пример переписать

без класса (речь о компоненте EditableTable)? Столкнулся с проблемой, что если в лоб методы переписать в тело FC, то получается, что при вызове handleAdd происходит иммутабильное обновление стейта (как оно, собственно, и должно быть), а метод handleDelete продолжает смотреть в скоуп старого компонента, т.к. был в нём объявлен и dataSource соответственно не поменяется...
https://codesandbox.io/s/7cxdm?file=/index.js

#frontend #javascript #programming #react.js #russian

0

19.11.2020

13 ответов

6 просмотров

Alexandr Автор вопроса

Мой кривой перенос на FC выглядит вот так. https://codesandbox.io/s/editable-cells-antd484-forked-j3q7l?file=/index.js

0

19.11.2020

Alexandr Автор вопроса

Денис
handleDelete = (key) => { const dataSource = [...

Да, вопрос заключается в том, как перенести этот классовый метод в функциональный компонент.

0

19.11.2020

Alexandr Автор вопроса

Alexandr
Да, вопрос заключается в том, как перенести этот к...

И при этом иметь из него доступ к актуальному состоянию стейта.

0

19.11.2020

Денис

Alexandr
Да, вопрос заключается в том, как перенести этот к...

const [data, setData] = useState(); const [count, setCounter] = useState(0) Или я не правильно понял тебя?)

0

19.11.2020

Stanislav

Alexandr
И при этом иметь из него доступ к актуальному сост...

setFoo(prevFoo => bar(prevFoo)) если не ошибаюсь (я просто на это поменял в песочнице и у меня удаление работает, поэтому вот)

0

19.11.2020

Alexandr Автор вопроса

Stanislav
setFoo(prevFoo => bar(prevFoo)) если не ошибаюсь (...

Ты имеешь ввиду использовать старый массив и в него запушить новый элемент?

0

19.11.2020

Stanislav

Alexandr
Мой кривой перенос на FC выглядит вот так. https:/...

это я про код в handleDelete тут

0

19.11.2020

DIEZ

Alexandr
И при этом иметь из него доступ к актуальному сост...

вопрос в том, как сделать так, чтобы метод объявленный в одной функции, был доступен в другой функции?))

0

19.11.2020

Alexandr Автор вопроса

Stanislav
это я про код в handleDelete тут

Не понял о чем ты, но проблему нашёл, в useMemo надо было список зависимостей передать просто.

0

19.11.2020

Stanislav

Alexandr
Не понял о чем ты, но проблему нашёл, в useMemo на...

тогда выходит я вашу проблему не понял. впрочем раз она решена уже неважно.

0

19.11.2020

Alexandr Автор вопроса

Stanislav
тогда выходит я вашу проблему не понял. впрочем ра...

Проблема была в том, что удаление не работало

0

19.11.2020

Alexandr Автор вопроса

Alexandr
Мой кривой перенос на FC выглядит вот так. https:/...

Всё, дошло, есть второй способ решения, который позволяет оставить столбцы неизменными, надо рили просто коллбэк заюзать в сетСтейт. https://codesandbox.io/s/editable-cells-antd484-forked-j3q7l?file=/index.js

0

19.11.2020

Денис · Accepted Answer

Денис

handleDelete = (key) => { const dataSource = [...this.state.dataSource]; this.setState({ dataSource: dataSource.filter((item) => item.key !== key), count: this.state.count - 1 });

0

19.11.2020

169 похожих чатов

Вопрос к адептам функциональных компонетов. Как вот такой пример переписать

13 ответов

Похожие вопросы