[英]React.js Pass input value from child to Parent
您好我正在尝试将输入值从 AddHamster(子)组件传递并呈现到 HamsterCard 组件(父)。 我收到错误消息:错误:对象作为 React 子项无效(找到:object,键为 {name, age, render})。 如果您打算渲染子集合,请改用数组。
关于如何解决这个问题的任何线索?
import React, {useState} from "react"; const AddHamster = () => { const [name, setName] = useState( '') const [age, setAge] = useState('') async function postHamster(){ const newHamster = { name: name, age: Number(age), } const response = await fetch('/hamsters ', {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(newHamster) }) const data = await response.json() console.log(data, "this is data id"); console.log(newHamster) } return { name, age, render: ( <div className="add-hamster"> <form onSubmit={e => { e.preventDefault(); }}> <label>Name</label> <input value={name} type="text" onChange={(e) =>setName(e.target.value)} id="addhamster" /> <label>Age</label> <input value={age} type="text" onChange={(e) =>setAge(e.target.value)} id="addhamster" /> </form> <button onClick={e => postHamster()}>Add Hamster</button> </div> )} } export default AddHamster;
AddHamster.jsx`
import React, {useState, useEffect} from "react"; import './HamsterCard.css'; import Hamster from './Hamster'; import AddHamster from './AddHamster.jsx'; const HamsterCard = () => { const {render, name, age} = AddHamster(); const [hamsters, setHamsters] = useState([]) useEffect(() => { async function get(){ const response = await fetch('/hamsters', {method: 'GET',}) //fetchar och tar emot data i reponsens const data = await response.json() //Data setHamsters(data) console.log(data) } get() }, [] ); return ( //pass the id inside of the delete function to which id to delete <div className="container"> <div className="hamster-card"> {hamsters.map((hamster) => ( <Hamster hamster={hamster} key={hamster.id} {...{name, age}}/> )) } {render} </div> </div> ) } export default HamsterCard;
仓鼠卡片.jsx
import React, {useState} from "react"; const Hamster = (props) => { const [hamsterDeleted, setHamsterDeleted] = useState(false) async function deleteHamster(id) { const response = await fetch(`/hamsters/${id}`, { method: "DELETE" }); setHamsterDeleted(true) } return ( hamsterDeleted? null: ( <div> <button onClick={() => deleteHamster(props.hamster.id)}>Delete</button> <h2>{props.hamster.name}</h2> <p>Ålder:{props.hamster.age}</p> <p>Favorit mat:{props.hamster.favFood}</p> <p>Matcher:{props.hamster.games}</p> <img src={'./img/' + props.hamster.imgName} alt="hamster"/> ) </div> )) } export default Hamster;
import React, {useState} from "react";
const AddHamster = () => {
const [name, setName] = useState( '')
const [age, setAge] = useState('')
async function postHamster(){
const newHamster = {
name: name,
age: Number(age),
}
const response = await fetch('/hamsters ', {method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(newHamster)
})
const data = await response.json()
console.log(data, "this is data id");
console.log(newHamster)
}
return {
name,
age,
render: (
<div className="add-hamster">
<form onSubmit={e => { e.preventDefault(); }}>
<label>Name</label>
<input value={name}
type="text"
onChange={(e) =>setName(e.target.value)}
id="addhamster" />
<label>Age</label>
<input value={age}
type="text"
onChange={(e) =>setAge(e.target.value)}
id="addhamster" />
</form>
<button onClick={e => postHamster()}>Add Hamster</button>
</div>
)}
}
export default AddHamster;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
您正在从AddHamster
组件导出 object。
错误:对象作为 React 子项无效(找到:object,键为 {name, age, render})
由于您的错误消息显示Objects are not valid as React Child
,您无法从 React 组件导出 object 并且render
是 class 组件中使用的方法。
如果您想从父级访问子级数据,请将名称和年龄 state 从AddHamster
(我已将名称和年龄合并到一个对象中)提升到HamsterCard
,并在 function 的返回中调用AddHamster
作为<AddHamster/>
.
添加仓鼠
const AddHamster = ({onChange,value}) => {
async function postHamster() {
const newHamster = {
name: value.name,
age: Number(value.age)
};
const response = await fetch("/hamsters ", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(newHamster)
});
const data = await response.json();
console.log(data, "this is data id");
console.log(newHamster);
}
return (
<div className="add-hamster">
<form
onSubmit={(e) => {
e.preventDefault();
}}
>
<label>Name</label>
<input
value={value.name}
type="text"
name="name"
onChange={onChange}
id="addhamster"
/>
<label>Age</label>
<input
value={value.age}
type="text"
name="age"
onChange={onChange}
id="addhamster"
/>
</form>
<button onClick={(e) => postHamster()}>Add Hamster</button>
</div>
);
};
仓鼠卡
const HamsterCard = () => {
const [hamsters, setHamsters] = useState([])
const [value,setValue] = useState({name:'',age:''})
useEffect(() => {
async function get(){
const response = await fetch('/hamsters', {method: 'GET',})
//fetchar och tar emot data i reponsens
const data = await response.json() //Data
setHamsters(data)
console.log(data)
}
get()
}, [] );
const onChange = (e) => {
setValue(currValue => ({...currValue,[e.target.name]: e.target.value}))
}
return (
//pass the id inside of the delete function to which id to delete
<div className="container">
<div className="hamster-card">
{hamsters.map((hamster) => (
<Hamster hamster={hamster}
key={hamster.id} {...value}/>
))
}
<AddHamster onChange={onChange} value={value}/>
</div>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.