SolidJS AG Grid 未响应式更新

Question

下面的代码应将名为“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

Answer 1

AG Grid 似乎不支持实体存储。限制可能是由于商店的运作方式所致。 Solid store依赖于Proxy API，这带来了一定的限制，例如，您无法跟踪整个商店。以跟踪商店的方式更改下面的效果，您会看到效果未触发。

createEffect(() => console.log(rowData));

但是您可以跟踪房产：

createEffect(() => console.log(rowData[0].price));

我更新了您的示例以更改价格而不是标题，以便更容易观察更改：

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;

您最好的选择是使用信号，因为没有一个使用

solid-js/store

的示例：

https://github.com/ag-grid/ag-grid-solid-example

PS：如果最好使用效果来检查值是否更新。