React表UseMemo

Question

我正在尝试实现reacts，以便在单击delete按钮时重新呈现表。delete工作，我可以看到我的数据数组随着每次单击delete按钮而减少，如果我强制重新加载页面，表将重新呈现。我不知道如何开始使用useMemo。有人能解释我是怎么做到的吗？

const Table = ({ columns, data }) => {
  const { getTableProps, headerGroups, rows, prepareRow } = useTable({
    columns,
    data,
  });

  return (
    <MaUTable {...getTableProps()}>
      <TableHead>
        {headerGroups.map(headerGroup => (
          <TableRow {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <TableCell {...column.getHeaderProps()}>{column.render('Header')}</TableCell>
            ))}
          </TableRow>
        ))}
      </TableHead>
      <TableBody>
        {rows.map((row, i) => {
          prepareRow(row);
          return (
            <TableRow data-row-item-id={row.values._id} {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <TableCell {...cell.getCellProps()}>{cell.render('Cell')}</TableCell>;
              })}
            </TableRow>
          );
        })}
      </TableBody>
    </MaUTable>
  );
};

const ExamTable = ({ data, isAdmin }) => {
  const columns = useMemo(() =>  
    [
    {
      Header: 'Patient ID',
      accessor: 'patient_Id',
      // // filterable: true,
      Cell: props => {
        const { original } = props.cell.row;
        return (
          <Link to={{ pathname: '/Patient/', state: { PATIENT_ID: props.value } }}>
            <span data-item-id={original.name}>{props.value}</span>
          </Link>
        );
      },
    },
    {
      Header: 'Exam ID',
      accessor: 'exam_Id',
      Cell: props => {
        const { original } = props.cell.row;
        let patient_Id = props.cell.row.cells[0].value;
        let exam_Id = props.cell.row.cells[1].value;
        return (
          <Link
            to={{ pathname: '/DisplayExam', state: { patient_Id: patient_Id, exam_Id: exam_Id } }}>
            <span data-name={original.name}>{props.value}</span>
          </Link>
        );
      },
    },
    {
      Header: 'Image',
      accessor: 'png_filename',
      Cell: props => {
        return (
          <img
            style={{ height: '80px', width: '80px' }}
            src={`https://ohif-hack-diversity-covid.s3.amazonaws.com/covid-png/${props.value}`}
          />
        );
      },
    },
    {
      Header: 'Key Findings',
      accessor: 'key_findings',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-timeframe={original.name}>{props.value || '-'}</span>;
      },
    },
    {
      Header: 'Brixia Scores',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-timeframe={original.name}>{'1,2,3,4'}</span>;
      },
    },
    {
      Header: 'Age',
      accessor: 'age',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      Header: 'Sex',
      accessor: 'sex',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      Header: 'BMI',
      accessor: 'latest_bmi',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      Header: 'Zip Code',
      accessor: 'zip',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      // MOVE TO ADMIN
      Header: 'Admin Privileges',
      Accessor: (str) => 'delete',
      Cell: props => {
      return <span><Update href= "UpdateExam.js"> Update </Update>
      
            {/* <Delete onClick ={() => {deleteExam(props.values["patient_Id"], props.values['exam_Id']);}}> Delete </Delete> </span> */}
            <Delete onClick ={() => {
              data.splice(props.cell, 1)
              api.deleteExam({EXAM_ID: props.cell.row.original['exam_Id'], PATIENT_ID: props.cell.row.original['patient_Id']}).then(() => 
              {props.cell.row = undefined;});
              }}> Delete </Delete> </span>
          } 
        }
  ] [data, api]);

  if ({isAdmin}.isAdmin == true) { 
  return (
    <Wrapper>
      <CssBaseline />
      <Table data={data} columns={columns} />
    </Wrapper>
  );
}

if ({isAdmin}.isAdmin == false) { 
  return (
    <Wrapper>
      <CssBaseline />
      <Table data={data} columns={columns.slice(0,9)} />
    </Wrapper>
  );
} 
};
export default ExamTable;

Answer 1

像这样

const columns = useMemo(() => [
    {
      Header: 'Patient ID',
      accessor: 'patient_Id',
      // // filterable: true,
      Cell: props => {
        const { original } = props.cell.row;
        return (
          <Link to={{ pathname: '/Patient/', state: { PATIENT_ID: props.value } }}>
            <span data-item-id={original.name}>{props.value}</span>
          </Link>
        );
      },
    },
    {
      Header: 'Exam ID',
      accessor: 'exam_Id',
      Cell: props => {
        const { original } = props.cell.row;
        let patient_Id = props.cell.row.cells[0].value;
        let exam_Id = props.cell.row.cells[1].value;
        return (
          <Link
            to={{ pathname: '/DisplayExam', state: { patient_Id: patient_Id, exam_Id: exam_Id } }}>
            <span data-name={original.name}>{props.value}</span>
          </Link>
        );
      },
    },
    {
      Header: 'Image',
      accessor: 'png_filename',
      Cell: props => {
        return (
          <img
            style={{ height: '80px', width: '80px' }}
            src={`https://ohif-hack-diversity-covid.s3.amazonaws.com/covid-png/${props.value}`}
          />
        );
      },
    },
    {
      Header: 'Key Findings',
      accessor: 'key_findings',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-timeframe={original.name}>{props.value || '-'}</span>;
      },
    },
    {
      Header: 'Brixia Scores',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-timeframe={original.name}>{'1,2,3,4'}</span>;
      },
    },
    {
      Header: 'Age',
      accessor: 'age',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      Header: 'Sex',
      accessor: 'sex',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      Header: 'BMI',
      accessor: 'latest_bmi',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      Header: 'Zip Code',
      accessor: 'zip',
      Cell: props => {
        const { original } = props.cell.row;
        return <span data-name={original.name}>{props.value}</span>;
      },
    },
    {
      // MOVE TO ADMIN
      Header: 'Admin Privileges',
      Accessor: (str) => 'delete',
      Cell: props => {
      return <span><Update href= "UpdateExam.js"> Update </Update>
      
            {/* <Delete onClick ={() => {deleteExam(props.values["patient_Id"], props.values['exam_Id']);}}> Delete </Delete> </span> */}
            <Delete onClick ={() => {
              data.splice(props.cell, 1)
              api.deleteExam({EXAM_ID: props.cell.row.original['exam_Id'], PATIENT_ID: props.cell.row.original['patient_Id']}).then(() => 
              {props.cell.row = undefined;});
              }}> Delete </Delete> </span>
          } 
        }
  ], [data, api])

如果在列定义中声明的任何变量都必须在deps数组中进行重新计算，则如果这些变量发生更改，则需要重新计算备忘。

• UseMemo UseMemo只返回列定义。
• 中使用的数据和api可能会更改，并且需要重新计算回传的值

。