Question

我对JS和JavaScript非常陌生，我碰壁了。

我有一个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调用中使用它来获取该孩子的数据。

感谢您的帮助！

Answer 1

在ShowChild组件的render方法中，您可以使用this.props.location.pathname获取当前URL，以获取当前位置。然后，您可以使用_id

通过简单的字符串提取来从中提取substr()

MERN：在组件之间传递_id

1 个答案: