javascript - React useState not updating array of objects - Stack Overflow

admin管理员组

文章数量:1406312

I am trying to use useState in my react functional ponent to update array of objects but nothing is happening. Here is the code I am trying:

const countriesData = [
  { id: 1, name: "India", person: "Harpreet" },
  { id: 2, name: "Aus", person: "Monty" },
  { id: 3, name: "UK", person: "Preet" },
];

ReactDom.render(<App />, document.getElementById("root"));

function App() {
  const [name, setName] = useState(countriesData);
  const arr = [{ id: name.length + 1, name: "Pak", person: "Mnm" }];
  const AddMe = () => {
    setName({ ...name, ...arr });
  };
  return (
    <>
      <CountryName data={countriesData} />
      <button onClick={AddMe}> Add me</button>
    </>
  );
}

function CountryName({ data }) {
  return (
    <React.Fragment>
      {data.map((element, index) => (
        <div key={index}>
          <h1>{element.person}</h1>
          <span>from : {element.name}</span>
        </div>
      ))}
    </React.Fragment>
  );
}

I am a newbie in React. I also tried having prevState as setName argument and then add like setName(prevState{ ...pevState, ...arr }); Already had a look on so many sources but no luck. Any help will be appreciated. Thanks!

I am trying to use useState in my react functional ponent to update array of objects but nothing is happening. Here is the code I am trying:

const countriesData = [
  { id: 1, name: "India", person: "Harpreet" },
  { id: 2, name: "Aus", person: "Monty" },
  { id: 3, name: "UK", person: "Preet" },
];

ReactDom.render(<App />, document.getElementById("root"));

function App() {
  const [name, setName] = useState(countriesData);
  const arr = [{ id: name.length + 1, name: "Pak", person: "Mnm" }];
  const AddMe = () => {
    setName({ ...name, ...arr });
  };
  return (
    <>
      <CountryName data={countriesData} />
      <button onClick={AddMe}> Add me</button>
    </>
  );
}

function CountryName({ data }) {
  return (
    <React.Fragment>
      {data.map((element, index) => (
        <div key={index}>
          <h1>{element.person}</h1>
          <span>from : {element.name}</span>
        </div>
      ))}
    </React.Fragment>
  );
}

I am a newbie in React. I also tried having prevState as setName argument and then add like setName(prevState{ ...pevState, ...arr }); Already had a look on so many sources but no luck. Any help will be appreciated. Thanks!

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Aug 31, 2020 at 12:44 norbitrial 15.2k1010 gold badges3939 silver badges6464 bronze badges asked Aug 31, 2020 at 12:41 PreetPreet 2511 silver badge66 bronze badges 2

• name is an array. In AddMe you are trying to merge objects – user0101 Commented Aug 31, 2020 at 12:43
• You are changing state property name, but you are always looping over countries data. Did you intend to loop over property name? – Alexander Staroselsky Commented Aug 31, 2020 at 12:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

The initial data is an array, see in countriesData variable, also in setName you try to use {}.

You should call with [] instead of {} as:

setName([ ...name, ...arr ]);

You need to do:

setName([ ...name, ...arr ]);

or

setName((prev) => [...prev, ...arr]);

and also update data:

<CountryName data={name} />

Here is full code:

import React, { useState } from "react";
import "./styles.css";

const countriesData = [
  { id: 1, name: "India", person: "Harpreet" },
  { id: 2, name: "Aus", person: "Monty" },
  { id: 3, name: "UK", person: "Preet" }
];
function CountryName({ data }) {
  return (
    <React.Fragment>
      {data.map((element, index) => (
        <div key={index}>
          <h1>{element.person}</h1>
          <span>from : {element.name}</span>
        </div>
      ))}
    </React.Fragment>
  );
}
export default function App() {
  const [name, setName] = useState(countriesData);

  const arr = [{ id: name.length + 1, name: "Pak", person: "Mnm" }];
  const AddMe = () => {
    setName((prev) => [...prev, ...arr]);
  };
  return (
    <>
      <CountryName data={name} />
      <button onClick={AddMe}> Add me</button>
    </>
  );
}

Here is the demo: https://codesandbox.io/s/keen-buck-ue9sn?file=/src/App.js:0-826

本文标签： javascriptReact useState not updating array of objectsStack Overflow