下面的代码应将名为“manufac”的第一列的标题名称更改为“new2”。 但它不起作用 - 就好像商店没有反应一样。 控制台表明更改已发生。 也许这里有一个简单的疏忽? 预先感谢。
import AgGridSolid from 'ag-grid-solid';
import 'ag-grid-enterprise';
import 'ag-grid-community/styles/ag-grid.css'; // grid core CSS
import "ag-grid-community/styles/ag-theme-balham.css"; // optional theme
import './gridStyles.css'
import { createSignal } from "solid-js";
import { createStore } from "solid-js/store";
function PageThree() {
const [name, setName] = createSignal('start');
const [columnDefs, setColumnDefs] = createStore([
{ field: 'make', headerName: 'manufac' },
{ field: 'model', headerName: 'carModel' },
{ field: 'price' },
]);
const rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
];
const fn_change1 = () => {console.log('change1 ') ; setName('new1')}
const fn_change2 = () => {console.log('change2 ') ; setColumnDefs(0,'headerName','new2') ; console.log(columnDefs[0].headerName)}
return (
<>
<div>Hello {name()}!</div>
<button onClick={fn_change1}>click1</button>
<button onClick={fn_change2}>click2</button>
<div class="ag-theme-balham" style={{ height: '100%' }}>
<AgGridSolid
columnDefs={columnDefs}
rowData={rowData}
/>
</div>
</>
)
}
export default PageThree
AG Grid 似乎不支持实体存储。限制可能是由于商店的运作方式所致。 Solid store依赖于Proxy API,这带来了一定的限制,例如,您无法跟踪整个商店。以跟踪商店的方式更改下面的效果,您会看到效果未触发。
createEffect(() => console.log(rowData));
import { Component, createEffect } from 'solid-js';
import { createSignal } from 'solid-js';
import { createStore } from 'solid-js/store';
import AgGridSolid from 'ag-grid-solid';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-alpine.css';
const App: Component = () => {
const columns = [
{ field: 'make', headerName: 'manufac' },
{ field: 'model', headerName: 'carModel' },
{ field: 'price', headerName: 'price' },
];
const [rowData, setData] = createStore([
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 },
]);
const changePrice = () => {
setData(0, 'price', (prev) => prev + 1);
};
createEffect(() => console.log(rowData[0].price));
return (
<>
<button onClick={changePrice}>Change Price</button>
<div class="ag-theme-balham" style={{ height: '100%' }}>
<AgGridSolid columnDefs={columns} rowData={rowData} />
</div>
</>
);
};
export default App;
PS:如果最好使用效果来检查值是否更新。