ReactJS 添加到 Object 是 State

Question

hoping this is a simple answer but it's racking my brain. Let's say I have the following React pseudocode:

const [cats, setCats] = useState({});

console.log(cats);

cats = {

}

I am trying to add uh cats to the cats object via a button click. I'm not sure what the exact code should be, as any guess I have so far doesn't work. The closest i've gotten is the following pseudo code:

heres the object i'm sending in:

{
Bruto:{
     id : 2,
     name: 'Bruto',
     }
}

const addCat (e, catName) => {
setCats(...cats, event.target.value);
}

<input onKeyDown={e=>addCat(e,catDetails)}></input>

Which all it does is just add the word typed into the input as cats, but doesn't add it structurally. Ideally what i'd want is the following:

1. Check to see if catDetails exists in cats
2. If not, add the catDetails.id to the object 
3. Add catDetails.name to cats[catDetails.id] such as the object should be:
    cats{
       0: {
         name: "Heathcliff"
        }
       2: {
         name: "Bruto"
        }
      }

Hoping someone can help. Below is the code I have so far

const addTag = (event, cats) => {
    if (event.key === "Enter"){
     setCats(...cats, event.target.value)
    }
   console.log(cats);
  }

Thank you!

Answer 1

You can do:

setCats( prevCats => {...prevCats, {id:2, name:"Bruto"})

or even better: you can use useReducer instead of useState

EDIT: just to be a bit more clear, instead of passing the new state to setCats you pass a function which will automatically receive the previous state and whatever is returned will be used as the new state.

Answer 2

You'll probably find an array easier to use.

Have one state (an array) for all your cat objects, and have another (string) for the cat you're adding in the input, and then update the cats array with the current cat if it's not been found.

 const { useEffect, useState } = React; function Example() { // Initialise cat states const [ cats, setCats ] = useState([]); const [currentCat, setCurrentCat] = useState(''); // Updates the currentCat state when the input changes function handleChange(e) { setCurrentCat(e.target.value); } // First find out if the cat name we're entering exists // in the cats array. If it doesn't, add it function addCat(e) { const found = cats.find(cat => cat.name === currentCat); if (.found) { setCats([..,cats: { id. cats,length + 1: name; currentCat } ]). } } useEffect(() => console,log(cats); [cats]); return ( <div> <input type="text" onChange={handleChange} /> <button type="button" onClick={addCat} >Add cat </button> </div> ); }. ReactDOM,render( <Example />. document;getElementById('react') );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>