小编SAK*_*URA的帖子

我想在 UseEffect 内部调用一个 prop 函数。以下代码有效：

useEffect(() => {
    props.handleClick(id);
  }, [id]);

但是 lint 抱怨props不是依赖项。

如果我这样做，那么代码将不再有效，并且我有最大的重新渲染错误：

  useEffect(() => {
        props.handleClick(id);
      }, [id, props]);

我该如何解决皮棉问题？

示例代码：

父组件

const ParentGrid = ({rows, columns}) => {

  const [selection, setSelection] = useState(null);

  const handleClick = selectedRows => {
    setSelection(selectedRows.map(i => rows[i]));
  };

  return (
      <ChildGrid
        columns={columns}
        data={data}
        handleClick={handleClick}
      />

子组件

const ChildGrid = props => {
  const {data, handleClick, ...rest} = props;

  useEffect(() => {
    handleClick(selectedRows);
  }, [selectedRows]);

我使用单选按钮来选择行。如何禁用多行选择以便一次只能选择一行？

我正在使用selectedFlatRows，但它允许选择多行。

const Table = props => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    selectedFlatRows,
  } = useTable(
    {
      columns,
      data: props.linkedProducts,
    },
    useSortBy,
    usePagination,
    useRowSelect,
    hooks => {
      hooks.visibleColumns.push(columns => [
        {
          id: 'selection',
          disableGlobalFilter: true,
          accessor: 'selection',
          Cell: ({row}) => (
            <RadioButton
              {...row.getToggleRowSelectedProps()}
            />
          ),
        },
        ...columns,
      ]);
    }
  );