Вы правы в отношении соглашения об изменении хранилищ - как правило, лучше создать новый массив или объект и распространить ваши старые данные в новые, пока вы объединяете свои новые данные.
Я думаю в вашем случае у вас есть опечатка в вашем onClick
обработчике. Вы не вызываете его в элементе Button - вы запускаете функцию стрелки, но внутри вы не вызываете метод addRow
! Я переписал его для вас и также переключился на хук useLocalStore
, так как это рекомендуется использовать в наши дни.
Это также хорошая возможность просмотреть синтаксис для вызова функций из атрибутов onClick
в реакции.
onClick={handleClick}
// Передав ссылку на функцию, React автоматически вызовет эту функцию при нажатии на элемент. Вам не нужно вызывать это вручную. Другими словами, ставить круглые скобки здесь неправильно.
onClick={() => handleClick}
// Создав функцию встроенной стрелки, React автоматически запустит эту функцию, как описано выше. Он будет выполнять каждую строку как обычная функция. Он достигнет идентификатора handleClick
и больше ничего не будет делать, потому что handleClick не вызывается в новой созданной вами функции стрелки.
onClick={() => handleClick()}
// То же, что и выше, в том случае, если вы создаете встроенное функция стрелки React запустит эту функцию стрелки, как указано выше. Он будет выполнять каждую строку, а затем вызывать вашу функцию, потому что вы вызывали ее с круглыми скобками.
Надеюсь, это поможет!
Кстати, вы захотите убедиться, что источник данных у вас Вы получаете новые строки, способные принять индекс, который вы передаете. Прямо сейчас, если вы нажмете кнопку более двух раз, вы получите ошибку индекса вне границ. Но я предполагаю, что вы уже позаботились об этой части, поэтому я не изменил эту часть вашего кода.
import React from "react";
import "./styles.css";
import { useObserver } from "mobx-react-lite";
import MaterialTable from "material-table";
import Button from "@material-ui/core/Button";
import { useLocalStore } from "mobx-react";
const columns = [
{ title: "First Name", field: "name" },
{ title: "Last Name", field: "surname" },
{ title: "Year of Birth", field: "birthYear", type: "numeric" },
{
title: "City of Birth",
field: "birthCity",
lookup: {
34: "Haughton",
63: "San Diego",
88: "Henryetta"
}
}
];
const initialData = [
{ name: "Dak", surname: "Prescott", birthYear: 1993, birthCity: 34 }
];
const addData = [
{ name: "Troy", surname: "Aikman", birthYear: 1966, birthCity: 88 },
{ name: "Tony", surname: "Romo", birthYear: 1980, birthCity: 63 }
];
const App = () => {
const store = useLocalStore(() => ({
data: initialData,
index: 0,
addRow() {
if (this.index < this.data.length) {
this.data = [...this.data, addData[this.index++]];
}
}
}));
return useObserver(() => (
<div className="App">
<MaterialTable
columns={columns}
data={store.data}
title="Sample Material Table"
/>
<Button onClick={store.addRow}>Add Row</Button>
</div>
));
};
export default App;