3

我正在尝试创建一个带有可排序列的 DetailsList（类似于此处文档中的示例：https ://uifabric.azurewebsites.net/#/controls/web/detailslist ），但我想使用 Class 组件而不是功能组件和钩子。

问题是在执行 onColumnClick 函数时，“items”数组仍然是空的。

这基本上是我的组件的设置：

const MyList= () => {
  const [items, setItems] = useState([]);
  const [columns, setColumns] = useState([]);

  useEffect(() => {
    const newItems = someFetchFunction()
    setItems(newItems);

    const newColumns= [
      {
        key: "column1",
        name: "Name",
        fieldName: "name",
        onColumnClick: handleColumnClick,
      },
      {
        key: "column2",
        name: "Age",
        fieldName: "age",
        onColumnClick: handleColumnClick,
      },
    ];
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(items); // This returns [] instead of a populated array.
  };

  return <DetailsList items={items} columns={columns} />;
};

问题是在handleColumnClick返回items一个空数组。当您想按特定列对项目进行排序时，这显然是一个问题。

4

1 回答 1

1

我认为 items 数组为空的原因是因为状态被“偷”了，看看这篇文章：https ://css-tricks.com/dealing-with-stale-props-and-states-in-反应功能组件/

老实说，我不明白为什么会这样，可能onColumnClick是异步处理的？！

但是添加一个useRef钩子为我解决了这个问题：

const MyList = () => {
  const [columns, setColumns] = useState([]);
  const [items, setItems] = useState([]);
  const refItems = useRef(items);

  const updateItems = (newItems) => {
    refItems.current = newItems;
    setItems(newItems);
  }

  useEffect(() => {
    const newItems = someFetchFunction()
    updateItems(newItems);

    const newColumns = // ...
    setColumns(newColumns);
  }, []);

  const handleColumnClick = (ev, column) => {
    console.log(refItems.current);
  };

  return <DetailsList items={items} columns={columns} />;
};
于 2020-10-28T12:17:51.903 回答