Функция React map для создания <Redirect>с неправильным параметром

Question

Я новичок в React.

A. js

const obj ={
  {name:objA, id:11111},
  {name:objB, id:22222},
};
const [isRedirect, setIsRedirect] = useState(false);


xxxxxxx.....................

return( 

   obj.map((data) => (
      <TableCell onClick = {setIsRedirect(true)}> 
           data.name 
       </TableCell>

   { isRedirect ?  

       
     <Redirect to={{ 
                                         
        pathname:'/user-management', 
                                          
        state:{userID:data.id},
     }}  />   : "" }
   )

 )

управление пользователями. js

 useEffect(() => {
        const history = createHashHistory();
    if (history.location.state && history.location.state.transaction) 
    {
        let state = { ...history.location.state };
        delete state.transaction;
        history.replace({ ...history.location, state });
    }


     console.log(props.location.state.userID); // show 22222


 }

После того, как я нажму кнопку objA table cell, код в user-management. js выполняется, но когда я console.log (props.location.state), он показывает идентификатор пользователя как 22222 вместо 11111. Кажется, что props.location.state в user -management всегда хранит последнее значение массива json obj. Как я могу изменить код? Буду признателен, если вы поможете. И извините за структуру кода.

Answer 1

Вероятно, что-то еще происходит, но я думаю, что обработчик onClick должен быть onClick={() => setIsRedirect(true)}.

Я вижу, вы пытаетесь визуализировать несколько Redirect s, но у вас только один isRedirect гос. Компонент весь отображает ... каждый отображаемый вами элемент. Я подозреваю, что когда вы переключите isRedirect true, вы, вероятно, получите перенаправление для каждого отображаемого элемента. Однако все они перенаправляются на один и тот же путь, поэтому последнее перенаправление с данными - это тот, который вы видите. data.id значение ( предполагает, что id всегда будет правдивым !!! )

...

const [redirectId, setRedirectId] = useState(null);

...

if (redirectId) {
  return (
    <Redirect
      to={{                             
        pathname: '/user-management',      
        state: { userID: redirectId},
      }}
    />
  );
}

return obj.map((data) => (
  <TableCell onClick={() => setRedirectId(data.id)}> 
    {data.name}
  </TableCell>
);