将列表转换为另一个具有新属性名称的新列表

Question

我有一个列表看起来像所有设置。我想将该列表转换为新列表。由于我是新手，所以我不太清楚，所以我尝试了以下方法，但新列表中的第一项总是空的。

const [mySetting, setMySet] = useState([]);
  useEffect(() => {
    const allSettings = [
      { name: "Setting1", value: true, label: 1 },
      { name: "Setting2", value: true, label: 2 },
      { name: "Setting3", value: true, label: 3 },
      { name: "Setting4", value: false, label: 4 },
      { name: "Setting5", value: true, label: 5 },
      { name: "Setting6", value: true, label: 6 },
      { name: "Setting7", value: true, label: 7 }
    ];
    const settings = [];
    const allSettingsMap = allSettings.reduce((resMap, current) => {
      settings.push(resMap);
      return {
        ...resMap,
        SettingID: current.label,
        Name: current.name,
        value: current.value
      };
    }, {});
    setMySet(settings);
  }, []);

//我想要这样的新列表：

const newSettings = [
          { name: "Setting1", value: true, SettingID: 1 },
         { name: "Setting2", value: true, SettingID: 2 },
          { name: "Setting3", value: true, SettingID: 3 },
          { name: "Setting4", value: false, SettingID: 4 },
          { name: "Setting5", value: true, SettingID: 5 },
          { name: "Setting6", value: true, SettingID: 6 },
          { name: "Setting7", value: true, SettingID: 7 }
        ];

Answer 1

您可以使用 array#map 重命名对象中的键并保持其他键不变。对于每个对象，您可以选择 label 并将其重命名为 SettingID 并保持其他键值不变。

const allSettings = [ { name: "Setting1", value: true, label: 1 }, { name: "Setting2", value: true, label: 2 }, { name: "Setting3", value: true, label: 3 }, { name: "Setting4", value: false, label: 4 }, { name: "Setting5", value: true, label: 5 }, { name: "Setting6", value: true, label: 6 }, { name: "Setting7", value: true, label: 7 } ],
      result = allSettings.map(({label, ...other}) => ({...other, SettingID: label}));
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

用这个地图方法替换你的allSettings.reduce方法

const settings = [];

allSettings.map((setting) => {
  const item = { ...setting };
  const tempValue = item?.label;
  // delete item label
  delete item["label"];

  item["SettingID"] = tempValue;

  settings.push(item);
});

Answer 3

你可以通过数组上的映射轻松做到这一点

const allSettings = [
      { name: "Setting1", value: true, label: 1 },
      { name: "Setting2", value: true, label: 2 },
      { name: "Setting3", value: true, label: 3 },
      { name: "Setting4", value: false, label: 4 },
      { name: "Setting5", value: true, label: 5 },
      { name: "Setting6", value: true, label: 6 },
      { name: "Setting7", value: true, label: 7 }
    ];
   const newAllSettings = allSettings.map(item => {
      return {
        name: item.name,
        value: item.value,
        SettingID:item.label
      };
    });
    console.log(newAllSettings)

将列表转换为另一个具有新属性名称的新列表

covert list into another new list with new property name

reduce

list

reactjs

将列表转换为另一个具有新 属性 名称的新列表

covert list into another new list with new property name

reduce

list

reactjs

将列表转换为另一个具有新属性名称的新列表