在材料表的自定义editComponent中设置值

import React, { useState } from 'react';
import MaterialTable from 'material-table';

const statuses = ['Active', 'Inactive', 'Pending'];

function StatusSelect({ rowData, onChange }) {
  return (
    <select value={rowData.status} onChange={(e) => onChange(e.target.value)}>
      {statuses.map((status, index) => (
        <option key={index} value={status}>
          {status}
        </option>
      ))}
    </select>
  );
}

function App() {
  const [data, setData] = useState([
    { id: 1, name: 'Material A', status: 'Active' },
    { id: 2, name: 'Material B', status: 'Inactive' },
  ]);

  return (
    <MaterialTable
      title="Editable Materials"
      columns={[
        { title: 'ID', field: 'id', editable: 'never' },
        { title: 'Name', field: 'name' },
        {
          title: 'Status',
          field: 'status',
          editComponent: (props) => (
            <StatusSelect rowData={props.rowData} onChange={props.onChange} />
          ),
        },
      ]}
      data={data}
      editable={{
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            const updatedData = [...data];
            const index = oldData.tableData.id;
            updatedData[index] = newData;
            setData(updatedData);
            resolve();
          }),
      }}
    />
  );
}

export default App;

<StatusSelect rowData={props.rowData} onChange={(newValue) => props.onChange(newValue)} />

const [data, setData] = useState(initialData);

// 在onRowUpdate中更新数据
onRowUpdate: (newData, oldData) =>
  new Promise((resolve) => {
    const updatedData = [...data];
    const index = oldData.tableData.id;
    updatedData[index] = newData;
    setData(updatedData); // 确保这里调用了setData
    resolve();
  }),