是否有任何方法可以使用reactJs中的location.state.map值设置state？

在这段代码中，我希望location.state.map的值即{val.img}、{val.price}等设置在states下面。 实际上，我想把location.state.map的值发送到我的电子商务webapp中，就像普通购物车一样

export default function DetailsPage(props) {
  let location = useLocation();
  let navigate = useNavigate();

在下面的代码中，我想用{val.img}设置setPic的值（您可以在下面的代码中找到）。类似地，我想用{val.price}设置setPrice的值，以此类推

  const [vpic,setPic]=useState();
  const [vquant,setQuant]=useState();
  const [vprice,setPrice]=useState("2345");
  const [vdetailname,setDetailname]=useState();
  
 
  const [bucketData, setbucketData] = useState([
    {
      pic: vpic,
      quant: vquant,
      price: vprice,
      detailname:vdetailname
    }
  ]);

  const addToCart =()=>{
         navigate("/home/bucket", { state: bucketData });

  }
  return (   
                   <div>  

const[vpic，setPic]=useState（）；
const[vquant，setQuant]=useState（）；
const[vprice，setPrice]=使用状态（“2345”）；
const[vdetailname，setDetailname]=useState（）；
常量[bucketData，setbucketData]=useState([
{
图片：vpic，
数量：vquant，
价格：vprice，
详细名称：vdetailname
}
]);
常量addToCart=（）=>{
导航（“/home/bucket”，{state:bucketData}）；
}
报税表（

这就是我希望值进入useState的地方

            {location.state.map((val, index) => {
              
                      return (
                                <div className="background" style= 
                 {{textAlign:"left",backgroundColor:"transparent"}}>   
                                    <br/><br/><br/><br/><br/>
                                      <Container>
                                  <table style={{width:"100%"}}>
                                      <tr >
                                        <td>

                                        <img
                                        id="image"
                                    src={val.img}
                                    style={{border:"1px dotted black"}}
                                    />  
                                        </td>
                                        <td >
                                        <h5 id="name">{val.name}</h5>
                                        <hr/>
                                        <p>
                                        <strong style={{padding:"5px"}}>Quantity</strong> <br/>
                                        <input type="number" id="quantity" min="1" max="10" placeholder="1" 
                                        // onChange={e => setQuant(e.target.value)}
                                        />
                                        </p>
                                    <hr/>
                                        <p id="prodprice"><strong>{val.price}</strong></p>
                                    <hr/>
                                    <button onClick={addToCart({val.img},)} style={{backgroundColor:"yellow",fontWeight:"bold",padding:"3px"}}>Add To Cart</button>
                                        </td>
                                        </tr>
                                    </table>
                                    </Container>
                              );               
                    </div>           
                  );
      })}      
   </div>    
  );
}

{location.state.map（（val，index）=>{
返回(

例如，我希望将src={val.img}的值设置为setPic useState

            {location.state.map((val, index) => {
              
                      return (
                                <div className="background" style= 
                 {{textAlign:"left",backgroundColor:"transparent"}}>   
                                    <br/><br/><br/><br/><br/>
                                      <Container>
                                  <table style={{width:"100%"}}>
                                      <tr >
                                        <td>

                                        <img
                                        id="image"
                                    src={val.img}
                                    style={{border:"1px dotted black"}}
                                    />  
                                        </td>
                                        <td >
                                        <h5 id="name">{val.name}</h5>
                                        <hr/>
                                        <p>
                                        <strong style={{padding:"5px"}}>Quantity</strong> <br/>
                                        <input type="number" id="quantity" min="1" max="10" placeholder="1" 
                                        // onChange={e => setQuant(e.target.value)}
                                        />
                                        </p>
                                    <hr/>
                                        <p id="prodprice"><strong>{val.price}</strong></p>
                                    <hr/>
                                    <button onClick={addToCart({val.img},)} style={{backgroundColor:"yellow",fontWeight:"bold",padding:"3px"}}>Add To Cart</button>
                                        </td>
                                        </tr>
                                    </table>
                                    </Container>
                              );               
                    </div>           
                  );
      })}      
   </div>    
  );
}

{val.name}


数量

setQuant（e.target.value）}
/>


{val.price}

添加到购物车
);               
);
})}      
);
}

不清楚您的要求是什么。你能补充更多的细节吗？请包括更多的细节我已经补充了澄清，现在请检查我的贝伦。我同意，除了在某个时刻想要从

location.state

映射进入组件状态之外，还不太清楚您想要什么。您正在映射一个数组，以便哪个数组元素的字段应该存储在状态中？你真的想将路由状态存储到组件状态吗？是的，实际上我正在制作一个化妆产品webapp，其中有很多产品，如果用户单击其中任何一个产品，它将重定向到该特定产品的详细页面。上面的代码是详细产品的代码，用户可以在其中查看产品名称、产品价格、调整产品数量，然后下订单。因此，如果用户单击addtocart按钮，无论产品的规格是什么，都应该发送到用户的购物车。。