1

我正在尝试从/ (Home)我的/item (itemInfo)页面传递一个数组

这是我们路由的主要 App() ：

function App() {
  return (
    <Router>
      <div className="Application">
        <Switch>    {/*Makes sure we are only on one route at a time*/}
          <Route exact path='/' component={Home} />
          <Route exact path='/item/:pId' component={ItemInfo} />
          <Route exact path='/vendor' component={VendorInfo} />
          <Route exact path='/addVendor' component={AddVendor}/>
          <Route exact path='/addProduct' component={AddProduct}/>
        </Switch>
      </div>
    </Router>
  );
}

而且我不知道如何将数组从 {Home} 传递到 {ItemInfo}，因为我们不能将它作为 URL 参数传递（与 :pId 不同） 这是 {ItemInfo} 页面：

import React from 'react'
import { useParams } from 'react-router-dom';    //Helps us redirect to other pages

function ItemInfo(){

    let {pId}= useParams();
    //want to have [data] array on this page to access it hopefully like this 
        //console.log(data) and see the array on the console

    function addNewDataRow(){
        console.log("ADD new Data Row");
    }

    return (
        <div className="Application">
            <header>
                <nav className="navbar navbar-dark bg-dark">
                    <div className="container-fluid">

这是 {Home}（我想从中传递数据数组）：

function Home(){

  const product_data=[
    {pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'},
    
  ]


  const [data,setData]=useState(product_data);
  const [vData, setvData]=useState(vendor_data);


  const history=useHistory();
  

  function itemTableRowClicked(e){
    console.log(e.target.id);
    console.log("YOU CLICKED ME");
    let path=`/item/:${e.target.id}`;
    //let path=`/item`;
    history.push(path);

  }

函数 itemTableRowClicked(e) 是重新路由到 ItemInfo 页面的函数

我是一个相当新的编程学生，所以如果我的描述不清楚或者我缺少基本信息，请告诉我 :)

4

2 回答 2

0

您已经在使用useHistoryreact-router。这将允许您state随路线更改一起推送。状态是您可以传递数组的地方。

// Push a new entry onto the history stack with a query string
// and some state. Location state does not appear in the URL.
history.push('/home?the=query', { someArray: [...stuff] });

然后，您可以在第二个组件中取消引用该状态props.location.state.someArray。

当然，您需要更改ItemInfo组件以接受道具。

更多信息：https ://v5.reactrouter.com/web/api/history

于 2021-12-15T22:59:22.563 回答
0

React 具有单向数据流，即 parent to child 。一种方法是在 Home 和 ItemInfo 即 App 的父组件中定义状态，但这不是一个好方法。其次是使用 Context Api 或其他状态管理工具，如 redux、flux 等 reactjs.org/docs/context.html（用于 context api）

function App() {

  const product_data=[
    {pId: 1, pName:'product name', pDescription:' description here', pQuantity:1, pWeightType:'Kg'},    
  ]
  const [data,setData]=useState(product_data);
  return (
    <Router>
      <div className="Application">
        <Switch>    {/*Makes sure we are only on one route at a time*/}
          <Route exact path='/' >
           <Home data={data} setData={setData} />
          </Route>
          <Route exact path='/item/:pId'>
           <ItemInfo data={data} />
          </Route>
          <Route exact path='/vendor' component={VendorInfo} />
          <Route exact path='/addVendor' component={AddVendor}/>
          <Route exact path='/addProduct' component={AddProduct}/>
        </Switch>
      </div>
    </Router>
  );
}
//Home component
function Home({data,setData})......

//ItemInfo component
function ItemInfo({data}){
于 2021-12-15T22:37:59.003 回答