如何在React中简化JSON对象数组的数据提取，避免重复声明变量？

很简单！你只需要把JSON数组里的所有对象合并成一个单独的对象，就能用一个data变量直接通过data.content1、data.content2访问对应内容了。这里有两种实用的方法：

方法一：使用Array.reduce + 展开运算符 #

修改你的App组件代码如下：

import React from "react";
import ReactDOM from "react-dom";
import jsonContent from "./data/content.json";
import Test1 from "./components/Test1.js";
import Test2 from "./components/Test2.js";
import "./styles.css";

function App() {
  // 遍历数组，把所有对象合并到一个空对象中
  const data = jsonContent.reduce((mergedObj, currentItem) => {
    return { ...mergedObj, ...currentItem };
  }, {});
  
  return (
    <div className="App">
      <Test1 content={data.content1} />
      <Test2 content={data.content2} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

reduce方法会逐个处理数组里的每个对象，每次把当前对象的属性展开并合并到累加器对象里，最终得到一个包含所有content属性的单个对象。

方法二：使用Object.assign（更简洁） #

如果你喜欢更短的写法，Object.assign也能轻松搞定：

function App() {
  // 把数组中的所有对象合并到空对象中
  const data = Object.assign({}, ...jsonContent);
  
  return (
    <div className="App">
      <Test1 content={data.content1} />
      <Test2 content={data.content2} />
    </div>
  );
}

这里利用了展开运算符把数组里的每个对象作为单独参数传给Object.assign，它会自动把所有属性合并到初始的空对象里。

两种方法都能完美实现你的需求，之后你就不用再单独声明data1、data2这些变量，直接用data访问所有内容即可~

内容的提问来源于stack exchange，提问作者Marcogomesr