使用 ReactMemo 渲染异步值

Question

我目前正在做一个小项目，涉及我使用带有外部包的反应备忘录 (react-tables)。轻微的问题是一些用于 table 数据的数据是从 API 中获取的，它会在第一次加载时抛出错误。更正此错误的理想方法是什么？

//react tables docs sort of requires the data be memoized, I think.
const data = React.useMemo(
  () => [
    {
      col0: 1,
      col1: `${items[0].name} ${items[0].symbol}`, //items values are gotten from state
      col2: items[0].price,
      col3: `${items[0]['1d'].price_change_pct * 100}%`,
      col4: <ChartTable />,
    },
    {
      col0: 2,
      col1: `${items[1].name} ${items[1].symbol}`,
      col2: items[1].price,
      col3: `${items[1]['1d'].price_change_pct * 100}%`,
    },
    {
      col0: 3,
      col1: `${items[2].name} ${items[2].symbol}`,
      col2: items[2].price,
      col3: `${items[2]['1d'].price_change_pct * 100}%`,
    },
    {
      col0: 4,
      col1: `${items[3].name} ${items[3].symbol}`,
      col2: items[3].price,
      col3: `${items[3]['1d'].price_change_pct * 100}%`,
    },
  ],
  [],
);

const columns = React.useMemo(
  () => [
    { Header: '#', accessor: 'col0' },
    {
      Header: 'Name',
      accessor: 'col1', // accessor is the "key" in the data
    },
    {
      Header: 'Price',
      accessor: 'col2',
    },
    {
      Header: 'Change',
      accessor: 'col3',
    },
    {
      Header: 'Chart',
      accessor: 'col4',
    },
  ],
  [],
);

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


//the code is table is then rendered

第一次加载时，它会抛出一个错误，无法读取未定义的属性 'name'，这肯定是因为当时没有定义项目观点。但是，如果在 table 被渲染之前定义了上述数据，它会按预期工作。所以问题真的是找到一种方法来延迟在第一次渲染时调用 data 函数。

这个问题有acceptable解决方法吗？

PS：到目前为止，如果它们没有被记忆，它会从反应 tables 代码本身抛出一个内部错误 无法读取属性 forEach 未定义

Answer 1

看似简单。

如果没有项目（例如），React.useMemo 应该 return 一个空数组。第二部分是 items 是 React.useMemo* 的依赖 - 不要忘记将它添加到钩子末尾的依赖数组中：

依赖是指当它发生变化时，那么钩子应该重新运行.

//react tables docs sort of requires the data be memoized, I think.
const data = React.useMemo(
  () => !items.length ? [] : [
    {
      col0: 1,
      col1: `${items[0].name} ${items[0].symbol}`, //items values are gotten from state
      col2: items[0].price,
      col3: `${items[0]['1d'].price_change_pct * 100}%`,
      col4: <ChartTable />,
    },
    {
      col0: 2,
      col1: `${items[1].name} ${items[1].symbol}`,
      col2: items[1].price,
      col3: `${items[1]['1d'].price_change_pct * 100}%`,
    },
    {
      col0: 3,
      col1: `${items[2].name} ${items[2].symbol}`,
      col2: items[2].price,
      col3: `${items[2]['1d'].price_change_pct * 100}%`,
    },
    {
      col0: 4,
      col1: `${items[3].name} ${items[3].symbol}`,
      col2: items[3].price,
      col3: `${items[3]['1d'].price_change_pct * 100}%`,
    },
  ],
  [items],
);

使用 ReactMemo 渲染异步值

Rendering Async values with ReactMemo

javascript

reactjs

asynchronous

async-await

react-usememo