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

Question

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

我试过这个解决方案： --> 但我无法让它工作，因为 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>

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

Bonus! You can also send an object in query string by using

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

在目标页面上，您可以通过使用 react-router useLocation 钩子和查询字符串包轻松地从 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)

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

React/ TYpescript open new page and pass Data

typescript

reactjs

eslint

react-router