对象数组中的 indexOf 问题。 反应应用

Question

我有以下情况，我想知道 indexOf 值以便稍后在代码中使用该知识。 但是，我尝试了多种不同的方法来获取价值，但似乎没有做对。 在下面的代码中，我尝试了几种不同的方法来搜索 Stackoverflow。 到目前为止，所有这些都返回 -1，这意味着我的代码或其他一些我目前无法找到的问题有问题。

仅供参考， selectedGroup 是一个内部有对象的数组，就像这样： [{label: "somelabel", value: 100}]并且可以有很多，取决于用户。

代码：

import React, { useState, useEffect } from 'react';

const GroupButtonMaker = ({ selectedGroup}) => {
  const [newButtons, setNewButtons] = useState([]);
  console.log(newButtons);

  useEffect(() => {
    const createButtons = () => {
      setNewButtons(
        selectedGroup.map(item => {
          return (
            <button
              id={item.value}
              className={'btn green micro'}
              key={item.value}
              onClick={event => btnHandler(event)}
            >
              {item.label}
            </button>
          );
        })
      );
    };
    createButtons();
  }, [selectedGroup]);

  const btnHandler = event => {
//here at the handler I'm trying multiple different ways to find indexOf as a test. No luck so far. 
    const eventID = event.currentTarget.id;
    let currentTargetIndex = newButtons
      .map(item => item.value)
      .indexOf(eventID);
    console.log(currentTargetIndex);
    console.log(newButtons.findIndex(x => x.value === eventID));
  };

  Array.prototype.indexOfObject = function arrayObjectIndexOf(property, value) {
    for (var i = 0, len = this.length; i < len; i++) {
      if (this[i][property] === value) return i;
    }
    return -1;
  };
// here i've hardcored one value as a test to see if it works but it didn't so far.
  console.log(newButtons.indexOfObject('value', 107));

  const idx = newButtons.reduce(function(cur, val, index, eventID) {
    if (val.value === eventID && cur === -1) {
      return index;
    }
    return cur;
  }, -1);
  console.log(idx);

  return <ul>{newButtons.map(item => item)}</ul>;
};
export default GroupButtonMaker;

预先感谢您对我当前问题的任何建议。 希望我已经设法以一种可以解决的方式描述了这个问题。 如果没有，请询​​问，我会尽力提供答案。

Answer 1

为什么不简单地将按钮的id传递给处理程序而不是从event中获取它。

您可以通过以下方式实现： onClick={(event) => btnHandler(item.value)}

然后在您的btnHandler ，只需从selectedGroup而不是newButtons所选按钮的索引。

在这里，试试这个：

import React, { useState, useEffect } from "react";

const GroupButtonMaker = ({ selectedGroup }) => {
  const [newButtons, setNewButtons] = useState([]);

  useEffect(() => {
    const buttons = selectedGroup.map(item => {
      return (
        <button
          id={item.value}
          className={"btn green micro"}
          key={item.value}
          onClick={(event) => btnHandler(item.value)}
        >
          {item.label}
        </button>
      );
    });
    setNewButtons(buttons);
  }, [selectedGroup]);

  const btnHandler = buttonId => {
    const selectedButtonIndex = selectedGroup.findIndex(item => item.value === buttonId);
    console.log("selectedButtonIndex is: ", selectedButtonIndex);
  };
  return <ul>{newButtons.map(item => item)}</ul>;
};
export default GroupButtonMaker;

---

这是供您参考的工作示例代码演示。