从列表中选择时如何使用React Router显示单个元素的详细信息不使用API​​，而是使用硬编码的数据

编程问答 2022-08-16

问题描述

现在，我已经映射了电影中的字符阵列，吐出了字符卡组件，这完全可以正常工作。我也有一个搜索框type = input，用于过滤显示的字符卡。但是我在使用反应路由器并将道具传递到单个“配置文件”组件时遇到了麻烦。这样，当您单击卡片时，它将呈现该单独的字符信息。单击时，字符名称显示在URL中。但是之后我很迷路。

大多数示例和教程都使用模板字符串和API提取，但这都是我正在使用的所有硬编码数据。任何帮助将不胜感激。我将通过分解道具和变量来重构。

这是我的app.js文件。 member_data是具有键值对的对象数组，例如名称：'steve'，引用：'blah blah blah'，而我使用name作为参数。

series.replace

这是显示从列表组件向下传递的道具的组件，其中@H_502_11@

df['cat'] = df.remark.replace({'Category1': 'insufficient','Category2': 'insufficient','Category3': 'Duplicate'})
df['subcat'] = df.remark.replace({'Category1': 'resolution','Category2': '@R_481_4045@ion','Category3': 'ID repeated'})

print(df)
      remark     desc           cat       subcat
0         NA  Present            NA           NA
1         NA  Present            NA           NA
2  Category1       NA  insufficient   resolution
3  Category2  Present  insufficient  @R_481_4045@ion
4  Category3       NA     Duplicate  ID repeated

function App() {
  const [members] = useState(member_data)
  const [search,setSearch] = useState('')
  const [profile,setProfile] = useState({})

  const handleInput = (e) => {
    setSearch(e.target.value)
  }

  const getProfile = (name) => {
    setProfile(member_data)
  }

  let filteredMembers = members.filter((member) => {
    return member.name.toLowerCase().includes(search.toLocaleLowerCase())
  })

  return (
    <Router>
      <div className='tc'>
        <Navbar />
        <Switch>
          <Route
            exact
            path='/'
            render={(props) => (
              <Fragment>
                <Search handleInput={handleInput} />
                <MemberList members={filteredMembers} />
              </Fragment>
            )}
          />
          <Route
            exact
            path='/about'
            render={(props) => (
              <Fragment>
                <About />
              </Fragment>
            )}
          />
          <Route
            path='/profile/:name'
            render={(props) => (
              <Profile
                {...props}
                profile={profile}
                getProfile={getProfile}
                members={member_data}
              />

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

dynamicfrontendjavascriptreactjsreactjsrouterrouter