Состояние не определено при использовании в react router link внутри useMemo hook

#reactjs #react-router #react-table

#reactjs #react-router #react-таблица

Вопрос:

Я использую react router для перехода на другую страницу и передачи состояния на эту страницу, используя это внутри useMemo

  const columns = React.useMemo(
    () => [
      {
        Header: "Actions",
        id: "actions",
        Cell: (tableProps) => {
          return (
            <>
               <Link
                to={{
                  pathname: "list-table/list-table-edit",
                  state: { selectedRow },
                }}
              > 
              <span
                style={{
                  cursor: "pointer",
                  color: "grey",
                  textDecoration: "underline",
                }}
                onClick={(event) => {
                  
                  setSelectedID(tableProps.row.original.asset_ID);
                }}
              >
                <Tooltip title="Edit Row">
                  <EditButton aria-label="edit">
                    <CreateIcon fontSize="small" />
                  </EditButton>
                </Tooltip>
              </span>
               </Link> 
            </>
          );
        },
      },
      ...MakeTableColumns,
    ],
    [selectedRow]
  );

Мое состояние объявляется следующим образом

   const [selectedID, setSelectedID] = useState();
  const selectedRow = oriData.find((row) => row.asset_ID === selectedID);

когда пользователь нажимает Edit , он устанавливает идентификатор строки selectedID , selectedRow находит значения строк и переходит на list-table-edit страницу.
однако, когда я утешаю.войдите props.location.state из list-table-edit , он показывает undefined . Когда я вынимаю <Link> .. за пределы useMemo и даю идентификатор состояния, он работает нормально, я думаю, что это что-то не так useMemo .
Если кто-нибудь может помочь, я был бы очень признателен, спасибо

Обновлено

Теперь я переключаюсь с state: { selectedRow } на state: { tableProps.row.original } и перехожу на другую страницу, и она работает без передачи состояния. Я мог бы уже иметь выбранное значение строки при вызове tableProps.row.original .

1. Вы проверили, что selectedRow определено в компоненте со ссылкой? Можете ли вы предоставить более полный пример кода? Предоставить код как для связующего компонента, так и для связанного компонента? Какую версию react-router / react-router-dom вы используете?

2. Я добавляю его в useMemo крючок для создания таблиц, я вынес его за пределы useMemo крючка, и он работает, похоже, что это с помощью крючка useMemo. Я обновлю свой вопрос.

3. Так ли это selectedRow в теле функционального компонента и пересчитывается каждый цикл рендеринга? Я думаю, нам все еще нужно больше контекста. Больше кода этого компонента и кода для компонента, пытающегося получить доступ к состоянию маршрута. По-прежнему не подтверждается, имеет ли selectedRow оно нужное значение при нажатии на ссылку.

4. Это может быть потому selectedRow , что не имеет значения при нажатии на ссылку внутри useMemo , это полный код компонента, если вы хотите проверить. codesandbox.io/s/confident-dirac-jhqp0?file=/src/App.js Я объявил эти государства на вершине.

5. Если вы вошли selectedRow в memo hook перед возвратом массива столбцов, видите ли вы, что он обновляется с обновлениями состояния в главном компоненте?

Ответ №1:

 <Link to={{ pathname: '/list-table/list-table-edit', state: { record: selectedRow} }}>My route</Link>