将值传递到useNavigate()，并在重定向组件中使用它

Question

我试图使用useNavigate()将值从一个组件传递到另一个组件。我尝试了另一个答案，我看到了堆叠溢出，但我得到的空白页重定向。

这是我的TableList.js，其中数据显示为表行。

TableList.js

import { TableRow, TableCell } from '@aws-amplify/ui-react';
import { EditOutlined } from "@ant-design/icons";
import { useNavigate } from 'react-router-dom';

const TableList = ({ val }) => {

  let navigate = useNavigate();

  const valuePassing = function (val) {
    navigate("/CRM7Edit", {
      state: val
    })
  };

  return (
    <TableRow> 
            <TableCell>{val.campaignOwner}</TableCell>
            <TableCell>{val.campaignName}</TableCell>
            <TableCell>{val.startDate}</TableCell>
            <TableCell>{val.endDate}</TableCell>
            <TableCell>{val.expectedRevenue}</TableCell>
            <TableCell>{val.budgetedCost}</TableCell>
            <TableCell>{val.actualCost}</TableCell>

            {/* Editing icon */}

            <TableCell>
              <EditOutlined className="buttons-crm9" onClick={valuePassing}/>
            </TableCell>
          </TableRow>
  )
}

export default TableList;

valuePassing()导航到具有这些值的另一个组件。

CRM7Editable是我想要显示值的组件。

CRM7Editable.js

import { TextField } from "@aws-amplify/ui-react";
import { useLocation } from 'react-router-dom';

export default function CRM7Editable(props) {

  let navigate = useNavigate();
  const { state } = useLocation(); // This one I saw in some other stackoverflow answer
  console.log(state);

  return (
    <TextField
      width="400px"
      height="36px"
      position="absolute"
      left="915px"
      top="375px"
      defaultValue={props.location.state.setCampaignOwner} // the value will be given here as a default value
      textAlign="left"
      border="1px SOLID rgba(155.00000596046448,171.00000500679016,198.00000339746475,1)"
      borderRadius="6px"
      padding="0px 0px 0px 10px"
      backgroundColor="rgba(255,255,255,1)"
      {...getOverrideProps(overrides, "View.View[1]")}
    ></TextField>

    <TextField
      width="400px"
      height="36px"
      position="absolute"
      textAlign="left"
      left="240px"
      top="235px"
      defaultValue={props.location.state.setCampaignName}}
      border="1px SOLID rgba(155.00000596046448,171.00000500679016,198.00000339746475,1)"
      borderRadius="6px"
      padding="0px 0px 0px 10px"
      backgroundColor="rgba(255,255,255,1)"
      {...getOverrideProps(overrides, "View.View[3]")}
    ></TextField>
  );

}

在CRM7Editable中，我希望将从TableList数据中获取的textfield值设置为默认值。

我的主表代码。这就是我使用TableList组件的地方。

CRM9New.js

import React, { useEffect, useState } from "react";
import { Table, TableBody, TableRow, TableCell, TableHead } from "@aws-amplify/ui-react";
import { DataStore } from "@aws-amplify/datastore";
import { Campaign } from '../models';
import "../styles/CRM9.css";
import { TableList } from '.';


export default function CRM9New(props) {

  const [ campaigns, setCampaigns ] = useState([]);

    useEffect(() => {
      listingCampaignsModels()
    }, []);

    async function listingCampaignsModels() {
      const apiData = await DataStore.query(Campaign);
      // console.log(apiData);
      setCampaigns(apiData);
    };

  return (
    <Table
      variation="bordered"
      highlightOnHover={true}>

      {/* Table Headings */}

      <TableHead>
        <TableRow>
          <TableCell 
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Campaign Owner</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Campaign Name</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Start Date</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >End Date</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Expected Revenue</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Budgeted Cost</TableCell>
          <TableCell
            as="th" 
            fontFamily="Roboto"
            fontSize="16px"
            fontWeight="400"
            color="rgba(105.00000134110451,119.00000050663948,148.000006377697,1)"
          >Actual Cost</TableCell>
        </TableRow>
      </TableHead>
      
      {/* TableList */}

      <TableBody>
      {campaigns.map((val, key) => (
        <TableList key={key} val={val}></TableList> // TableList is called here.
      ))}
      </TableBody> 

    </Table>
  );

}

我的App.js

import { CRM7ModifiedNew, CRM6New, CRM8New, CRM9New, CRM7Editable } from './components';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';


const App = () => {

  return (

    <Router>
        <Routes>
          <Route path="/" element={<CRM6New />}></Route>
          <Route path="/CRM9" element={<CRM9New />}></Route>
          <Route path="/CRM8" element={<CRM8New />}></Route>
          <Route path="/CRM7" element={<CRM7ModifiedNew />}></Route>
          <Route path="/CRM7Edit" element={<CRM7Editable />}></Route>
        </Routes>
      </Router>

  );

}

export default App;

有人能帮帮我吗。我只想将值从一个组件传递到另一个组件，同时导航和显示它们。

Answer 1

您只需删除函数的params，state就会接收您从道具中发送的val。

const valuePassing = function () {
  navigate("/CRM7Edit", {
    state: val
  })
};