reactjs方法不断返回未定义

时间:2018-10-17 12:44:44

标签: javascript reactjs

我的方法非常简单。它循环遍历对象数组,并在参数中返回具有给定id的对象。在这里:

returnValueToDelete(id) {
    this.state.rows.map(function(value) {
      if (value["id"] === id) {
        console.log(value);
        return value;
      }
    });
  }

当我在具有实际ID的渲染函数中调用此方法时:

console.log(this.returnValueToDelete("IDThatExists"));

自被调用以来,它将首先在returnValueToDelete函数中打印正确的值,但是它将打印未定义的值。谁能解释为什么以及如何解决这个问题?我在render方法中打印了它,因为我想在使用它之前先对其进行测试,但是由于我们正在打印返回的内容,因此它似乎总是返回undefined。任何帮助将不胜感激!

编辑

这是我的this.state.rows:

rows: [
    {
      id: "name",
      numeric: false,
      disablePadding: true,
      label: "Dessert (100g serving)"
    },
    {
      id: "calories",
      numeric: true,
      disablePadding: false,
      label: "Calories"
    },
    {
      id: "fat",
      numeric: true,
      disablePadding: false,
      label: "Fat (g)"
    },
    {
      id: "carbs",
      numeric: true,
      disablePadding: false,
      label: "Carbs (g)"
    },
    {
      id: "protein",
      numeric: true,
      disablePadding: false,
      label: "Protein (g)"
    }
  ]

3 个答案:

答案 0 :(得分:2)

下面是一个示例,其中行已硬编码为状态。

 this.state = {
   rows: [
     {id:1, name: 'ss'},
     {id:2, name: 'aa'}
   ]
 };

  returnValueToDelete(id) {
    return this.state.rows.filter(value => value.id === id)
  }

  console.log(this.returnValueToDelete(1))

答案 1 :(得分:1)

我不知道您为什么使用Array.prototype.map()

如果要查找匹配元素,可以像这样使用Array.prototype.find()

returnValueToDelete(id) {
  return this.state.rows.find(e => value["id"] === id);
}

  

它打印未定义。谁能解释为什么以及如何解决这个问题?

因为您忘记了return语句。

答案 2 :(得分:1)

  

它打印未定义。谁能解释为什么以及如何解决这个问题?

您正在正确创建新数组,但是对结果却没有做任何事情。您可以将其保存到变量中,然后将其返回:

const arr = this.state.rows.map(...
...
return arr;

或者直接返回结果:

return this.state.rows.map(...

话虽如此,看来您正在尝试返回原始数组的一个子集。因此,您应该使用filter()而不是map()

returnValueToDelete(id) {
  this.state.rows.filter(function(value) {
    return value["id"] === id
  });
}

并带有粗箭头语法:

returnValueToDelete(id) {
  return this.state.rows.filter(value => value["id"] === id);
}

演示

const rows = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  {
    id: "calories",
    numeric: true,
    disablePadding: false,
    label: "Calories"
  },
  {
    id: "fat",
    numeric: true,
    disablePadding: false,
    label: "Fat (g)"
  },
  {
    id: "carbs",
    numeric: true,
    disablePadding: false,
    label: "Carbs (g)"
  },
  {
    id: "protein",
    numeric: true,
    disablePadding: false,
    label: "Protein (g)"
  }
];

const returnValueToDelete = (id) => {
  return rows.filter(value => value["id"] === id);
}

console.log(returnValueToDelete("fat"));