时间戳

首页 > 解决方案 > ReactJS：使用不同的值更新状态数组的每个元素

reactjs - ReactJS：使用不同的值更新状态数组的每个元素

问题描述

对于 React JS 中的以下情况，我需要一点帮助：我的一个组件中有一个状态，它是一个由 3 个 json 对象组成的数组，如下所示：

 const [data, setData] = useState([ {name:'a'}, {name:'b'}, {name:'c'}])

而且我还有一个包含 3 个随机名称的数组：

const randomArray = ['d', 'e', 'f']

我想做一个方法，它将作为参数randomArray并像这样更新新状态：

data = [ {name:'d'}, {name:'e'}, {name:'f'}]

有任何想法吗？

标签： reactjsstate

解决方案

您可以使用地图功能。它从回调函数返回一个新数组。您可以像这样返回名称属性；

import { useEffect, useState } from "react";

export default function App() {
  const [data, setData] = useState([
    { name: "a" },
    { name: "b" },
    { name: "c" }
  ]);
  const randomArray = ["d", "e", "f"];

  const setNewValues = () => {
    setData(randomArray.map(name=> ({ name})));
  };

  useEffect(() => {
    console.log(data);
  }, [data]);
  return (
    <div className="App">
      <button onClick={setNewValues}>Set Data </button>
    </div>
  );
}

推荐阅读