时间戳

首页 > 解决方案 > 推送到数组是返回索引而不是项目（React）

javascript - 推送到数组是返回索引而不是项目（React）

问题描述

我正在尝试将一个新对象添加到我通过 API 动态获取的数组的末尾。用户填写表单，以便将数据从表单传递到状态。

最初的第一次获取是将原始数组存储到一些反应状态，这很好，然后在某个时候，应该将一个对象添加到原始数组的末尾，所以整个数组将包含原始数据，加上新对象添加。

自然，我正在尝试使用 array.push() 来尝试实现这一目标，但我一直在获取索引而不是数据对象。

// declare state will be an array

const [originalPages, setOriginalPages] = useState([]);

// Get all the existing data

loadInitialValues() {
  return fetch(`example.com/api/collections/get/testing_features?token=${process.env.REACT_APP_API_KEY}`)
  .then((res) => {
    return res.json();
  })
  .then((res)=>{
    // set state to be the whole array for this post
    setOriginalPages(res.entries[4].pagebuild);
    return res.entries[4].pagebuild[0].settings;
  })
  .catch((err)=>{
      console.error(err);
  })
}

此时数据一切正常，从表单中收集新数据也正常。但是，此时数据会被回发以更新 API，但只返回一个数字：

 onSubmit(formData) {

  // Dynamically hook all the newly collected form data to this new data object

  let theData = {
    component: 'page',
    settings: {
      title: formData.title,
      pageOptions: {
        pageSideImg: formData.pageOptions.pageSideImg,
        isReversed: formData.pageOptions.isReversed,
        paraGap: formData.pageOptions.paraGap,
        paraFont: formData.pageOptions.paraFont,
      },
      pageNavigation: {
        pageSlug: formData.pageNavigation.pageSlug,
        nextPage: formData.pageNavigation.nextPage,
        prevPage: formData.pageNavigation.prevPage,
      },
      globalOptions: {
        projectName: formData.globalOptions.projectName,
        transType: formData.globalOptions.transType,
        menuTrans: formData.globalOptions.menuTrans,
      },
      blocks: formData.blocks
    }
  };
  
  cms.alerts.info('Saving Content...');

   return fetch(`example.com/api/collections/save/testing_features?token=${process.env.REACT_APP_API_KEY}`, {
      method: 'post',
      headers: { 
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
          data: {
                  // Only returning the array count as a number
                  pagebuild: originalPages.push(theData),
                _id: "610963c235316625d1000023"
          }
       })
     })
      .then(response => response.json())
      .catch((err) => {
        cms.alerts.error('Error Saving Content');
        console.log(err);
      });
   },

如果有人对为什么会发生这种情况有任何想法，我将不胜感激！

作为参考，我在这里检查过，也许我应该使用 spread 代替？

标签： javascriptarraysreactjs

解决方案

Array.push不会返回您需要的最终数组，而是返回修改后数组的最终长度（这就是您认为它是索引的原因）。

用这个替换这个字符串pagebuild: originalPages.push(theData),：

pagebuild: [...originalPages, theData],

当然，如果您想更新内部originalPages状态值，请在您的onSubmit():

setOriginalPages(x => [...x, theData]);

推荐阅读