Reactjs 无法打开物料台内的开关

我试图创建带有开关的材质表，onclick会更改组件的状态

下面是带有表的组件，它将父组件的状态作为一个道具。我将行变量传递给物料表数据属性。开关是自定义渲染字段。每当我点击它时，它就会触发changeRow，它在rows变量中查找row的索引，并将其保存到新变量中。然后调用ChangeRows来更改状态。 问题是，开关没有改变。看起来好像什么都没发生，尽管我可以清楚地看到控制台中的新状态

const StuffTable = ({rows, changeRows}) => {

const changeRow = (oldRow, e) => {
    const changeData = {[e.target.name]: e.target.checked};
    const newRow = {...oldRow, ...changeData};

    console.log(oldRow, e);

    const index = rows.findIndex(dtaRow => dtaRow.id === oldRow.id);
    const newData = rows;
    newData[index] = newRow;

    console.log(newData);
    changeRows(newData);
};

return (
    <Container maxWidth="lg">
        <Button onClick={() => { changeRow({id: 6}, { target: {name: 'borrowable', checked: true} }) }}>klikni</Button>
        <MaterialTable
            options={{
                actionsColumnIndex: -1,
                search: true,
                exportButton: true,
                exportDelimiter: ";"
            }}
            actions={[
                {
                    icon: 'edit',
                    tooltip: 'Edit Study',
                    onClick: (event, rowData) => alert("Do you want to edit?")
                }]}
            columns={[
                { title: "Název", field: "title" },
                { title: "Stav", field: "status", render: (data) => <Chip label={data.status} color="primary" avatar={<Avatar src="/static/images/avatar/1.jpg" />} /> },
                { title: "Půjčovat", field: "borrowable", render: (data, id) => (<FormControlLabel control={<Switch checked={data.borrowable} onChange={(e) => changeRow(data, e)} name="borrowable" color="primary"/>} label={data.borrowable ? 'půjčovat' : 'nepůjčovat'} />) },
                { title: "Vidí všichni", field: "active", render: (data, id) => (<FormControlLabel control={<Switch checked={data.borrowable} onChange={(e) => changeRow(data, e)} name="borrowable" color="primary"/>} label={data.borrowable ? 'půjčovat' : 'nepůjčovat'} />) },
                { title: "Uskladněno", field: "location" },
            ]}
            data={rows}
            title="Moje věci"
        />
    </Container>
);
};

 export default StuffTable;

从“./组件/StuffTable”导入StuffTable

让行=[ {id:5，标题：“prošvanice”，可借用：false，姓氏：“Baran”，身份：“zapůjčeno”，地点：“Praha”}， {id:6，标题：“prošvanice 2”，可借用：false，姓氏：“Baran”，身份：“zapůjčeno”，地点：“Praha”}， {id:7，标题：“prošvanice 3”，可借用：false，姓氏：“Baran”，身份：“zapůjčeno”，地点：“Brno”} ];

这是父组件

const MyStuffPage = () => {

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

    return (
        <div>
            <StuffTable rows={data} changeRows={(data) => {setData(data); console.log("hou",data);}} />
        </div>
    );
};

export default MyStuffPage;

constmystufpage=（）=>{
const[data，setData]=使用状态（行）；
返回(
{setData（data）；console.log（“hou”，data）；}/>
);
};
导出默认MyStuffPage；

下面是出现此问题的Codesandbox：

---

无论何时要向数据表呈现新数据或状态，都需要调用onQueryChange，进行以下更改： 在开始时创建一个参考，如下所示：

const tableRef = useRef(null);

然后在材质表中使用它：

<MaterialTable
   //add this
   tableRef={tableRef}
   options={{
     actionsColumnIndex: -1,
     search: true,
     exportButton: true,
     exportDelimiter: ";"
   }}

---

这将告诉表格以正确的开关状态呈现新数据

谢谢回答我的问题。在与useRef类型进行了一些斗争之后（感谢typescript），我能够使用您建议的解决方案。但它抛出错误，整个页面消失，控制台显示错误材料表。js:288 uncaughttypeerror:_this.props.data不是函数。有什么线索吗？（控制台屏幕）@Kudlas您在组件中设置了

data={rows}

吗？是的。（也在原始注释中）。你能在codesandbox上共享这部分代码吗，这样我们就可以一起工作了？您好，我更改了它，看了下面的更改

<MaterialTable
   //add this
   tableRef={tableRef}
   options={{
     actionsColumnIndex: -1,
     search: true,
     exportButton: true,
     exportDelimiter: ";"
   }}

tableRef.current.onQueryChange()