javascript - 对象数组中的 indexOf 问题。 react 应用程序

Question

我遇到以下情况，我想知道 indexOf 值以便稍后在代码中使用该知识。然而，我尝试了多种不同的方法来获得值(value)，但我似乎没有得到正确的结果。在下面的代码中，我尝试了几种不同的搜索 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;

---

Here's a Working Sample Code Demo for your ref.