Javascript 是否为React中的每个元素创建唯一的导航链接？

我有一些问题。我从本地Json文件中获取一个数组，并将其置于本地状态。下面，您可以看到我在哪里使用地图显示array phone的所有型号。当我点击其中一个时，它会创建一个带有特殊id（包含在数组中）的新链接。我的路线在应用程序内组件中，但此导航链接在商店内组件中。（你可以在下面看到）

const-App=（）=>{
返回(
} />
} />
} />
)
}

所以，我不知道如何创建具有唯一参数的组件CurrentIphone。 当用户单击其中一个时，用户只需查看响应其id的参数（价格、型号等）

class Iphone extends React.Component {
  constructor(){
    super();
    this.state = {
      phone: []
    }
  }

  //put domain's title to prevent circular dependency on windows
  //domain's title 'MyWebShop/'

  componentDidMount() {
    getPhone.then(({data}) => {
      this.setState({
        phone: data
      })
    })
  }

  render() {
    return(
      <div>
          {this.state.phone.map((p,index) => (
            <div className='model' key={index}>             
              <NavLink to={'/CurrentIphone' + p.id}>{p.body.model}</NavLink> 
            </div>))}
      </div>
    )
  }
}

export default Iphone;

class.com组件{
构造函数（）{
超级（）；
此.state={
电话：[]
}
}
//放置域标题以防止循环依赖windows
//域的标题“MyWebShop/”
componentDidMount（）{
然后（{data}）=>{
这是我的国家({
电话：数据
})
})
}
render（）{
返回(
{this.state.phone.map（（p，index）=>(
{p.body.model}
))}
)
}
}
导出默认Iphone；

我不确定你的问题是什么，也不确定你为什么要在IPhone上使用类组件。据我所知，你需要一条动态路线

  <Route path="/CurrentIphone" render={() => <CurrentIphone />} />

}/>

应该是

  <Route path="/CurrentIphone/:id" render={() => <CurrentIphone />} />

}/>

PS，传递子对象而不是渲染是首选方法

 <Route path="/CurrentIphone/:id">
        <CurrentIphone />
 </Route>

而且，您似乎缺少了“/”

{p.body.model}

最有可能的是

 <NavLink to={'/CurrentIphone' + p.id}>{p.body.model}</NavLink>

{p.body.model}

或者使用模板文本

 <NavLink to={`/CurrentIphone/{p.id}`}>{p.body.model}</NavLink> 

{p.body.model}

好的，我将进一步扩展我的答案

您当前的iPhone组件应该如下所示

顺便说一句，我假设你没有使用typescript

  const CurrentIPhone = ({ match }) =>{
    // the match prop and id that we destructure from it is there because you 
    // used the Route component with the path "CurrentPhone/:id"
    const { params } = match;
    const { id } = params;

    // all this nasty match params id stuff can be avoided if you just use 
    // the new react router hooks.
    // if that was the case, you wouldn't destructure any props
    // you would just use 
    let { id } = useParams()

    const [deviceList, setDeviceList] = useState([])

    // get the list of all the devices and store it in state, as you did in 
    // the other iphone component
    useEffect(()=>{
        getPhone.then(({ data }) => {
         setDeviceList(data)
        })
      }, [])

    // take the array of all devices and the id you have from the match prop
    // and get the device by comparing the two id's
    const chosenDevice = deviceList && deviceList.filter(el=>el.id===id)

    return(
      <div>{chosenDevice && chosenDevice.name}</div>
    )
  }

const CurrentIPhone=（{match}）=>{
//我们从中解构的匹配道具和id就在那里，因为您
//使用路径为“CurrentPhone/：id”的路由组件
常量{params}=match；
const{id}=params；
//如果您只需使用
//新的路由器挂钩。
//如果是这样，你就不会破坏任何道具
//你只需要
设{id}=useParams（）
const[deviceList，setDeviceList]=useState（[]）
//获取所有设备的列表并将其存储在状态中，就像您在中所做的那样
//另一个iphone组件
useffect（（）=>{
然后（{data}）=>{
设置设备列表（数据）
})
}, [])
//从match道具中获取所有设备的阵列和id
//并通过比较两个id来获取设备
const chosenDevice=deviceList&&deviceList.filter（el=>el.id==id）
返回(
{chosenDevice&&chosenDevice.name}
)
}

---

别忘了从react导入useEffect和useState

我有一个带有object的数组，每个object都有自己的属性。。当用户单击时，例如在Iphone X上，可能只有关于Iphone X的信息，与其他型号的情况相同。我不知道如何创建组件，向用户显示这些属性。您需要将：id作为路径的一部分。然后，您正在构建的组件CurrentPhone应该从它的路由中获取id，并使用它从json中获取正确的模型。我强烈建议使用最新的react路由器钩子从路由器中提取id参数。我不太明白如何做到这一点。我为每个项目都做了特殊的Id，但我必须在“CurrentIphone”中做的是好的，很清楚，但我有一个问题：无法对“match”的属性“Id”进行分解，因为它是未定义的。（我使用Route path=“/CurrentIphone/：id”）来解释，如果不传递依赖项数组[]，它将在每次组件重新加载时运行。如果您传递它[]，useEffect钩子将只运行一次，如果您传递一个值，比如说[deviceList]，钩子将在每次deviceList的值更改时运行。我想说，对于大多数用例，您都会使用[]

 <NavLink to={`/CurrentIphone/{p.id}`}>{p.body.model}</NavLink> 

  const CurrentIPhone = ({ match }) =>{
    // the match prop and id that we destructure from it is there because you 
    // used the Route component with the path "CurrentPhone/:id"
    const { params } = match;
    const { id } = params;

    // all this nasty match params id stuff can be avoided if you just use 
    // the new react router hooks.
    // if that was the case, you wouldn't destructure any props
    // you would just use 
    let { id } = useParams()

    const [deviceList, setDeviceList] = useState([])

    // get the list of all the devices and store it in state, as you did in 
    // the other iphone component
    useEffect(()=>{
        getPhone.then(({ data }) => {
         setDeviceList(data)
        })
      }, [])

    // take the array of all devices and the id you have from the match prop
    // and get the device by comparing the two id's
    const chosenDevice = deviceList && deviceList.filter(el=>el.id===id)

    return(
      <div>{chosenDevice && chosenDevice.name}</div>
    )
  }