微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React JS Material Table - 表格单元格更新未呈现在 UI 上,但可以在商店和控制台上看到更新

如何解决React JS Material Table - 表格单元格更新未呈现在 UI 上,但可以在商店和控制台上看到更新

我刚刚尝试实现了材料表官方文档中提供的基本示例。 当我单击编辑并尝试更改任何字段数据时,变量和存储中的数据正在更新,但在我们单击保存并呈现页面后,它没有显示在屏幕上。任何人都可以请告知我在这里缺少什么? 代码如下:

function StringValidation() {
  const [data,setData] = useState();
  return (
    <MaterialTable
      title="String Validation Preview"
      columns={[
        {
          title: 'Name',field: 'name',validate: rowData => rowData.name === '' ? 'Name cannot be empty' : '',},{ title: 'Surname',field: 'surname',validate: rowData => rowData.surname.length < 2 ? 'Surame must be have 3 chars' : '',{ title: 'Birth Year',field: 'birthYear',type: 'numeric',validate: rowData => rowData.birthYear < 1900 ? 'Birthyear must be after 1900' : '',{
          title: 'Birth Place',field: 'birthCity',lookup: { 34: 'İstanbul',63: 'Şanlıurfa' },]}
      data={[
        { name: 'Mehmet',surname: 'Baran',birthYear: 1987,birthCity: 63 },{ name: 'Zerya Betül',birthYear: 2017,birthCity: 34 },]}
      editable={{
        onRowAdd: newData =>
          new Promise((resolve,reject) => {
            setTimeout(() => {
              setData([...data,newData]);
              resolve();
            },1000)
          }),onRowUpdate: (newData,oldData) =>
          new Promise((resolve,reject) => {
            setTimeout(() => {
              const dataUpdate = [...data];
              const index = oldData.tableData.id;
              dataUpdate[index] = newData;
              setData(dataUpdate);

              resolve();
            },}}
    />
  )
}

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。