我只想将对象数组缩减为一个对象

Question

这是我的对象数组。

const [data, setData] = useState([
    { banner: "", intersitial: "", native: "", openVoice: "" },
    { banner: "", intersitial: "", native: "", openVoice: "" },
    { banner: "", intersitial: "", native: "", openVoice: "" },
]);

这也是我的提交方法

const handleSubmit = () => {
    const bannerData = data.map((ele) => {
      return ele.banner;
    });

    const nativeData = data.map((ele) => {
      return ele.native;
    });

    const intersitialData = data.map((ele) => {
      return ele.intersitial;
    });

    const openViaData = data.map((ele) => {
      return ele.openVoice;
    });

    const newData = {
      appId: id,
      banner: bannerData,
      intersitial: intersitialData,
      native: nativeData,
      openVia: openViaData,
    };
    axios
      .post(`${url}/ads/create-ads`, newData)
      .then((res) => {
        console.log("res", res);
      })
      .catch((err) => {
        console.log("error", err);
      });
  };

我使用了四个地图函数，然后将数据传入单个对象。基本上我想要 1 个 reduce 方法

Answer 1

All in one reduce 方法应该是这样的：

const handleSubmit = () => {
  const newData = data.reduce((prev, current) => ({
    ...prev,
    banner: [...prev.banner, current.banner],
    intersitial: [...prev.intersitial, current.intersitial],
    native: [...prev.native, current.native],
    openVia: [...prev.openVia, current.openVoice] 
  }), {
    appId: id,
    banner: [],
    intersitial: [],
    native: [],
    openVia: [],
  });

  axios
    .post(`${url}/ads/create-ads`, newData)
    .then((res) => {
      console.log("res", res);
    })
    .catch((err) => {
      console.log("error", err);
    });
};

您可以使用一些空数组传递初始值，并在 reduce 方法的每次迭代中填充它们。

Array.reduce usage and syntax here

我只想将对象数组缩减为一个对象

I Just want to reduce array of object into one object

javascript

arrays

reduce

object

reactjs