Question

我正在尝试在我的React功能组件中使用useState来更新对象数组，但没有任何反应。这是我正在尝试的代码：

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

我是React的新手。我还尝试将prevState作为setName的参数，然后像setName(prevState{ ...pevState, ...arr });一样添加，已经查看了很多资源，但没有运气。任何帮助将不胜感激。谢谢！

Answer 1

初始数据是一个数组，请参见countriesData变量，也可以在setName中尝试使用{}。

您应使用[]而不是{}进行呼叫，

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

Answer 2

您需要这样做：

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

或

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

并更新数据：

<CountryName data={name} />

这里是完整代码：

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

以下是演示：https://codesandbox.io/s/keen-buck-ue9sn?file=/src/App.js:0-826

反应useState不更新对象数组

2 个答案: