React рендерит компонент как функцию состояния и реквизита, это делает детерминированность рендеринга c (т. Е. Для заданного ввода результат всегда будет одинаковым), этот критерий позволяет реагировать, чтобы знать, когда визуализировать страницу. Таким образом, всякий раз, когда изменяется состояние или реквизит, компонент отображается снова, чтобы отразить это изменение.
В вашем случае onClick ожидает функцию - обработчик события. Когда пользователь щелкает ваш элемент, как элемент должен его обрабатывать? Это должно быть определено пользователем как функция.
<IconButton
onClick={() => {
--row.calories;
alert("Decremented to " + row.calories);
}}
>
<RemoveCircleOutlineRoundedIcon />
</IconButton>
{row.calories}
<IconButton
onClick={() => {
++row.calories;
alert("Incremented to " + row.calories);
}}
>
, поэтому мы добавили функцию и видим, что значение точно отражено в предупреждении. Но страница, кажется, не отражает текущее значение калории ie. Это потому, что мы никогда не информировали, что что-то изменилось пользователем.
Это может быть сделано через состояние, мы можем выбрать использование состояния, когда мы знаем, что некоторые данные могут быть изменены пользователем, и они должны быть отображены. Государство принадлежит компоненту. State может быть простым объектом с одним полем или сложным с несколькими полями и объектами.
let [foodData, setFoodData] = useState(rows);
/* existing code */
<TableBody>
{foodData.map((row, index) => (
/* existing code */
<IconButton
onClick={() => {
setFoodData(prev => [
...prev.slice(0, index),
{ ...prev[index], calories: prev[index].calories - 1 },
...prev.slice(index + 1)
]);
}}
>
/* do the same to increment */
'...' - это оператор распространения ES6, и для идентификации текущей строки, которую мы хотим изменить, мы используем 'index' в качестве параметра для функции карты.
Теперь, чтобы изменить объект, мы можем создать новый массив, который содержит:
- Все элементы от 0 до индекса
- Объект, который мы хотим изменить
- Все элементы от индекса + 1 до конца массива
Метод среза массива может достичь этого, поскольку он не измените исходный массив.
Этот новый массив будет установлен как текущее состояние, и реакция будет перерисована.
https://www.newline.co/fullstack-react/ - первая глава книги объясняет это подробно и вводит в состояние. useState - это хук, на который можно сослаться - https://reactjs.org/docs/hooks-state.html