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

问题描述

我遇到以下情况，我想知道 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;

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

标签： javascriptreactjs

为什么不简单地将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;

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

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

问题描述

解决方案

推荐阅读