0

我对反应和 JS 很陌生，而且我遇到了一些障碍。

我有一个 MERN 堆栈并使用基本的读写 API 运行。我正在尝试链接到一个新组件（使用 Mongo id）并获取该特定 id 的所有数据。我有链接工作，但我不确定如何将 _id 传递给新组件。如果是从父母到孩子，我会使用道具，但这是从孩子到孩子的。

到目前为止，这是我的代码。

容器

import React, { Component } from 'react';
import { Route, Switch} from 'react-router-dom';
import MyKids from '../MyKids/MyKids';
import ShowChild from '../ShowChild/ShowChild';
import Home from '../Home/Home';

import './RightPanel.css';

class RightPanel extends Component{

componentDidMount() {

}

render () {
    return (
    <div className="col-sm-9 right">

        <Route exact path='/' component={Home}/>
        <Route path='/mykids' component={MyKids}/>
        <Route path='/show' component={ShowChild}/>

    </div>
)

}

}

export default RightPanel;

组件 - MyKids

import React, { Component } from 'react';
import { Link } from 'react-router-dom'

import Child from '../../Components/Child/Child'

class MyKids extends Component {
constructor(props) {
super(props);

let kids = [];

this.state = {
  kidsData: [],
};
}
componentDidMount() {
let kids = [];

fetch( 'http://localhost:3001/api/kids' )
.then( response => response.json())
.then( result => kids = result.data)
.then(() => console.log(kids))
.then(() => this.setState({kidsData: kids}))
}

render() {

  const { kidsName } = this.state;
  return (
    <div className = 'col-sm-12'>
      {this.state.kidsData.map((person, index) => (
        <p>Hello, <Link to={ `/show/${this.state.kidsData[index]._id}` } >{person.firstName}</Link></p>
      ))}

      <form method="post" action="http://localhost:3001/api/kids">
        <label>Enter Your Name</label>
        <input type="text" name="firstName" placeholder="Enter first name..." required />
        <input type="text" name="lastName" placeholder="Enter last name..." required />
        <input type="text" name="age" placeholder="Enter age..." required />
        <input type="text" name="notes" placeholder="Notes..." required />
        <input type="submit" value="Add Kid" />
      </form>
    </div>
);
}
}


export default MyKids;

“链接到”效果很好，我应该得到“ http://localhost:3000/show/5b28f31be5fea7325cfe3883 ”。但是，我不知道如何获取该 ID 并在我的 API 调用中使用它来获取该孩子的数据。

谢谢你的帮助！

4

1 回答 1

0

在你的ShowChild组件的render方法中，你可以通过使用this.props.location.pathname获取当前 URL 来获取当前位置。然后，您可以_id使用类似的东西通过简单的字符串提取从中提取substr()

于 2018-06-19T15:08:27.967 回答