时间戳

首页 > 解决方案 > React map 函数创建带有错误的参数

reactjs - React map 函数创建带有错误的参数

问题描述

我是 React 的初学者。

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表格单元格后，user-management.js中的代码执行，但是当我console.log（props.location.state）时，它显示用户ID为22222而不是11111。似乎是props.location.state在用户管理中始终存储 json 数组 obj 的最后一个值。如何修改代码？如果你们能提供帮助，我将不胜感激。对不起代码结构。

标签： reactjsreact-router

解决方案

可能还有更多事情要做，但我认为onClick处理程序应该是onClick={() => setIsRedirect(true)}.

我看到您正在尝试渲染多个Redirects，但您只有一个isRedirect状态。整个组件呈现...您映射的每个元素。我怀疑，一旦您切换isRedirecttrue 时，您可能会为每个映射的元素获得重定向。它们都重定向到相同的路径，所以最后一个带有数据的重定向就是你看到的那个。

建议

仅有Redirect条件地渲染一个，并设置isRedirect为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>
);

推荐阅读