React.js将输入值从子传递给父

Question

嗨，我正在尝试将输入值从AddHamster (子)组件传递给HamsterCard组件(父组件)。我得到了错误消息: Error: Objects作为React子对象无效(找到:带有键{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;

​

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组件导出一个对象。

错误:对象作为React子对象无效(找到:键{name、age、render}的对象)

正如您的错误消息所说的，Objects are not valid as React Child不能从React组件导出对象，而且render是类组件中使用的一种方法。

如果希望从父对象访问子数据，请将名称和年龄状态从AddHamster (我已经将名称和年龄组合到一个对象中)解除到HamsterCard，并在函数返回中以<AddHamster/>形式调用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>
  );
};

HamsterCard

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>    
     
    )
}