React.js 將輸入值從子級傳遞給父級

Question

您好我正在嘗試將輸入值從 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>

Answer 1

您正在從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>    
     
    )
}