reactjs 数据不在另一网格中呈现,为什么？

soat7uwm 于 2023-06-29 发布在 React

关注(0)|答案(1)|浏览(89)

我正在尝试单击一个网格中的行，并在另一个网格中显示其数据。该列被命名为我要显示其数据的内容。但是当我单击时，我看到console.log中的数据，而不是另一个网格中的数据。为什么？这是我的代码
任何帮助都将不胜感激

const handleClick = (event) => {
    const rowIndex = event.currentTarget.rowIndex;
    const clickedContent = pimerror[rowIndex].content;
    setClickedContent(clickedContent);
    console.log(clickedContent);
  };

  <Grid item xs={12} lg={3.7}>
          <AdvancedTableView
            title="Test Files"
            id_sort="datetime"
            data={pimerror.map((error) => {
              
              return {
                ...error,
                datetime: moment(error.datetime, "YYYYMMDDHHmmss").format(
                  " DD/MM/YYYY, HH:mm:ss"
                ),
              };
            })}
          
            filter_list={["content"]}
           
            onRowClick={handleClick}
          />
        </Grid>


 <Grid item xs={12} lg={4}>
          <AdvancedTableView
            title="Clicked Content"
            data={{ content: clickedContent }} // pass clickedContent to data prop
            filter_list={[]}
          />
        </Grid>

reactjs

来源：https://stackoverflow.com/questions/76572517/the-data-is-not-rendering-in-another-grid-why

1条答案

按热度按时间

p4rjhz4m1#

useState钩子实际上是异步的。这就是为什么当你调用setClickedContent时，结果会在一段时间后出现。
在你的例子中，你可以用钩子useState来存储点击的索引。当被点击的索引发生变化时，clickedContent可以用钩子useMemo计算。
你可以看看我创建的简单例子。单击第一个表后，将重新呈现第二个表。

export const arr1 = [1, 2, 3, 4, 5];
export const arr2 = [
  { index: 1, value: "value1" },
  { index: 1, value: "value11" },
  { index: 1, value: "value111" },
  { index: 2, value: "value2" },
  { index: 2, value: "value22" },
  { index: 2, value: "value222" },
  { index: 3, value: "value3" },
  { index: 4, value: "value4" },
  { index: 5, value: "value5" }
];

export default function App(): JSX.Element {
  const [selected, setSelected] = useState<number>();

  const data = useMemo(() => arr2.filter((c) => c.index === selected), [
    selected
  ]);

  return (
    <>
      <h1>First</h1>
      <table>
        {arr1.map((item, i) => (
          <tr>
            <td role="button">
              <span onClick={() => setSelected(item)}>{item}</span>
            </td>
          </tr>
        ))}
      </table>
      <h2>Second</h2>
      <table>
        {data.map((item, i) => (
          <tr>
            <td>{item.index}</td>
            <td>{item.value}</td>
          </tr>
        ))}
      </table>
    </>
  );
}

工作示例如下：https://codesandbox.io/s/simple-usememo-y5tk58

赞(0）回复(0）举报 2023-06-29

我来回答

reactjs 数据不在另一网格中呈现,为什么？

1条答案

相关问题

热门标签

最新问答