React.js:仅在刷新页面后才更新组件[Post请求]

Question

嗨，伙计们还没反应过来，正在开发一个小的反应应用程序，用来显示仓鼠的照片。在AddHamster组件中，我有一个Post请求，似乎运行良好；“对象被传递到数据库！”我的问题是，对象只有在刷新页面后才会显示。我需要仓鼠对象直接显示在页面后，按下添加按钮，连接到表单。

有线索吗？

import React, {useState} from "react";
import HamsterCard from './HamsterCard'
import './AddHamster.css';

const AddHamster = () => {


    const [name, setname ] = useState('')
    const [age, setage ] = useState('')
    const [favFood, setfavFood ] = useState('')
    const [imgName, setImgName ] = useState('')
    const [hamsterItems, setHamsterItems] = useState([])
    
        async function handleAddHamster(){

            const newHamster = {
            name: name,
            age: Number(age),
            favFood: favFood,
            imgName: imgName
           }
           console.log(newHamster, 'newHamster')
   
        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 a data response");
        if (response.status === 200){
            setHamsterItems([...hamsterItems,name, age, favFood, imgName])
            setname('')
            setage('')
            setfavFood('')
            setImgName('') 
        
        }       
    }

  return(
        <div className="add-todo-wrapper">
            <form onSubmit={(e) => e.preventDefault()}>
            <label>name
                <input type="text" 
                name="id"  
                value={name}
                onChange={e => setname(e.target.value)} />
            </label>
                <label>age
                <input type="text" 
                name="id" 
                value={age}
                onChange={e => setage(e.target.value)} />
            </label>
            <label>favFood
                <input type="text" 
                name="id" 
                value={favFood}
                onChange={e => setfavFood(e.target.value)} />
            </label>
            <label>Image
                <input type="text" 
                name="id" 
                value={imgName}
                onChange={e => setImgName(e.target.value)} />
            </label>
            <div className="message">{hamsterItems ? <p>{[...hamsterItems]}</p> : null}</div>
            </form>
            <button onClick={() => handleAddHamster()}>ADD</button>
            <HamsterCard />
        </div>
        
    )

}
export default AddHamster;

import React, {useState, useEffect} from "react";
import './HamsterCard.css';


const HamsterCard = () => {
    const [hamsters, setHamsters] = useState([])

    useEffect(() => {
        async function get(){
        const response = await fetch('/hamsters', {method: 'GET',})
        const data = await response.json() 
        setHamsters(data)
        console.log(data)
     
        } 
       get()    
    }, []  );
    
    return (
        <div className="container"> 
           <div className="hamster-card">
            {hamsters.map((hamster) => (
            <Hamster hamster={hamster}  
            key={hamster.id} />  
            ))
            }
          </div>
         
        </div>    
     
    )
}

export default HamsterCard;

import React, {useState} from "react";
const Hamster = ({name, age, favFood, hamster}) => {
 
   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(hamster.id)}>Delete</button>
                <h2>{hamster.name}</h2> 
                <p>Ålder:{hamster.age}</p> 
                <p>Favorit mat:{hamster.favFood}</p> 
                <img src={'./img/' + hamster.imgName} alt="hamster"/> 
                </div>
              ))
        }
    
       
    

export default Hamster;

更改代码后

setHamsterItems(...hamsterItems，姓名，年龄，favFood，imgName)

至

setHamsterItems(...hamsterItems，newHamster)

我收到以下错误消息：

​

​

Answer 1

在AddHamster组件中，当您更新hamsterItems时，它会呈现整个组件，但是在Hamstercard中，您将使用useEffect从数据库中获取最新仓鼠，该数据库仅在HamsterCard组件首次挂载以重新呈现HamsterCard时运行，您必须在useEffect of HamsterCard中添加一些依赖项，所以每次单击add按钮时，这将重新呈现HamesterCard。

为此，您可以将hamsterItems作为道具发送到HamsterCard，并将其传递给useEffect依赖数组。

 <HamsterCard hamsterItems={hamsterItems}/>

function HamsterCard({  hamsterItems }) {

  useEffect(() => {
        async function get(){
        const response = await fetch('/hamsters', {method: 'GET',})
        const data = await response.json() 
        setHamsters(data)
        console.log(data)
     
        } 
       get()    
    }, [hamsterItems]  );

Answer 2

现在起作用了..。问题是这条线：

<div className="message">{hamsterItems ? <p>{[...hamsterItems]}</p> : null}</div>

试图将一个对象直接呈现到jsx中。