Eléggé új vagyok a reagálásban, JS és én egy kicsit falba ütközünk.
Van egy MERN verem és fut egy alapvető olvasási és írási API-val. Megpróbálok linkelni egy új összetevőt (a Mongo azonosítóval), és lekérem az adott azonosítóhoz tartozó összes adatot. A linkelés működik, de nem tudom, hogyan adjam át az _id-t az új összetevőnek. Kellékeket használnék, ha a szülőtől a gyermekig, de ez a gyerektől a gyermekig.
Itt van az eddigi kódom.
Konténer
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;
Összetevő – 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;
A „Link to” remekül működik, és a következőt kapom: „http://localhost:3000/show/5b28f31be5fea723
Köszönünk minden segítséget!
Redux? Hozzájárulna némi sablon és tanulási görbe, de ez triviálissá teheti például az azonosító tárolását olyan helyen, ahol más összetevők hozzáférhetnek. Ismét olvassa el a következőt: miért nincs szüksége Reduxra, mielőtt belevágna? 20.06.2018