javascript - 为什么 array.findIndex 返回的不是函数。（Mozilla说它基本上是？）

问题描述

更改state.findIndex以state.ids.findIndex解决此问题。

但是，当调用该函数时，onClick它会自动将所有active值更新为true. 而不是等待点击事件。

我正在尝试设置一个onClick方法/函数，它将找到active: true并将其设置为false，然后找到匹配的对象id: xxxxxx并将该对象设置active:为true。

根据 developer.mozilla.org 和其他几个站点的说法，我的方法理论上应该有效，或者更可能是我误解了它。

这是它返回的错误

这是我正在尝试编写的函数 - 为什么它返回 findindex 不是函数？

function changeActiveField(im) {
  const i = state.findIndex((obj) => obj.active === true);
  state[i].active = false;
  const index = state.findIndex((obj) => obj.id === im);
  state[index].active = true;
}

在这里const i找到的索引obj{ active: true}并将其更改为obj{ active: false} 然后const index找到obj与从单击的组件传入的obj{id: value}匹配的...im

<div className="thumbs">
          {state.ids.map((i) => (
              <Image
                className="carouselitem"
                rounded
                fluid
                onClick={changeActiveField(i.id)}
                src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
                size="small"
              />
          ))}
        </div>

转到https://test.ghostrez.net并导航到“服务”页面以查看视频菜单。小缩略图是应该触发changeActiveField功能的“可点击”项目，依次设置点击和id更改divactive: trueactivevid

这是完整的页面代码。

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Embed, Image, Loader } from "semantic-ui-react";
import "./Player.css";

var state = {
  ids: [
    {
      id: "iCBvfW08jlo",
      active: true,
    },
    {
      id: "qvOcCQXZVg0",
      active: false,
    },
    {
      id: "YXNC3GKmjgk",
      active: false,
    },
  ],
};

function firstActiveId(ids) {
  for (var i = 0; i < ids.length; i++) {
    if (ids[i].active) {
      return ids[i].id;
    }
  }
}

function changeActiveField(im) {
  const i = state.findIndex((obj) => obj.active === true);
  state[i].active = false;
  const index = state.findIndex((obj) => obj.id === im);
  state[index].active = true;
}

export default class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      state: false,
    };
  }
  render() {
    return (
      <div className="carouselwrap">
        <div className="activevid">
          <Embed
            active
            autoplay={false}
            color="white"
            hd={false}
            id={firstActiveId(state.ids)}
            iframe={{
              allowFullScreen: true,
              style: {
                padding: 10,
              },
            }}
            placeholder={
              "http://img.youtube.com/vi/" +
              firstActiveId(state.ids) +
              "/hqdefault.jpg"
            }
            source="youtube"
          />
        </div>
        <div className="thumbs">
          {state.ids.map((i) => (
            <>
              <Image
                className="carouselitem"
                rounded
                fluid
                onClick={changeActiveField(i.id)}
                src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
                size="small"
              />
              <h2>
{/*this is for testing purposes only*/}
                {i.id} {i.active ? "true" : "false"}
              </h2>
            </>
          ))}
        </div>
      </div>
    );
  }
}

标签： javascriptreactjs

function changeActiveField(im) { const i = state.findIndex((obj) => obj.active === true); state[i].active = false; const index = state.findIndex((obj) => obj.id === im); state[index].active = true; }

javascript - 为什么 array.findIndex 返回的不是函数。（Mozilla说它基本上是？）

问题描述

解决方案

推荐阅读