React/ TYPEscript 打开新页面并传递数据

Question

我对 Typescript 还很陌生，老实说，我仍然在非常基本的功能上苦苦挣扎。我的情况是这样的：我有一个包含对象的数组（每个对象 8 个属性）。在我的页面上，我遍历这个数组并显示每个对象的一些数据。对于每个显示的对象，都有一个按钮/链接，我通过它链接到下一页 (zuBewrtenderTest.tsx)。我想将一个属性（UniqueID）从所选对象传递到下一页，以便我可以再次从数组中访问正确的对象。无论如何我不知道如何传递数据/访问它。为此使用 redux 商店对我来说似乎有点矫枉过正，因为我真的只需要传递这个 int。

我尝试了这个解决方案：Passing Data to Another Component OnClick --> 但我无法让它工作，因为 typescript 中不再允许使用 this 和 props

这是我的代码

function tests() {

  //Test Navigation
  <Route path="/zuBewertenderTest/:name" exact component={ZuBewertenderTest}></Route>

  //Test um

  const classes = UseStyles();

  return (
      
      <div className={classes.root}>      
        <Grid className="container" container spacing={3}>
          <Grid item xs={12}>
            <Paper className={classes.paper}></Paper>
          </Grid>

          {testDaten.map((item, key) => {
            return (
            <Grid item xs={4} sm={4} key={item.UniqueId}>
              <Input value={item.UniqueId} type="number" id="idTest"/> 
              <Paper className={classes.paper}> Besucher-Id: {item.UniqueId} </Paper>
              <Paper className={classes.paper}> Name: {item.Vorname} {item.Nachname}</Paper>
              <Paper className={classes.paper}> Nachweisart: {item.Nachweisart} </Paper> 
              <Paper className={classes.paper}>   <Link to={`/zuBewertenderTest/${item.UniqueId}`}>More info</Link> </Paper> 
            </Grid>
          )
          })}
        </Grid>
      </div>
      
  );
}

Answer 1

如果您希望从您的 url 传递任何数据，可以使用 url 查询来完成。

如果您需要以这种方式传递多个值 传递单个值：

<Link to={`/URL/${item.UniqueId}?uniqueIdentifier={$uniqueValue}`}>More info</Link>

每次只需使用“&”即可传递多个值。

奖金！您还可以使用

在查询字符串中发送对象

const obj={val1:"value1",val2:"value2"}
const queryString = queryString.stringify(obj);
<Link to={`/URL/${item.UniqueId}?${queryString}`}>More info</Link>

在目标页面上，您可以使用 react-router useLocation hook 和 query-string 包轻松从 url 获取查询参数来解析您的查询：

import queryString from 'query-string'
import { useLocation } from 'react-router-dom'

    const { search } = useLocation()
    const values = queryString.parse(search)
    console.log(values.filter)
    console.log(values.origin)