如何检查状态对象数组的 return 值并使用它来识别从哪个对象获取数据

Question

目标： 当单击搜索状态 ids 并定位 时，使用映射组件中 i.id 的值object里面包含了相同的id值...当这个object被发现为return/updateid和active值。

点击动态渲染组件触发onClick将当前active: true的值更改为active: false并找到点击组件的id和this.setState({active:value}) 在该对象中。然后 if (active === true) 渲染包含对象 id 值的 iframe。

状态

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

为每个状态渲染的组件

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

我真的不知道该怎么办

我在 for ...in... 循环中尝试了一个 if 循环...但是在尝试呈现页面时除了错误之外什么也没给我。

完整代码

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Button, Embed, Icon, Image, List } from "semantic-ui-react";
import "./Services.css";
import logo from "./images/EIB 3D Logo v25.png";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import ReactPlayer from "react-player";
import MediaQuery from "react-responsive";

export default class Services extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: [
        {
          id: "iCBvfW08jlo",
          active: true,
        },
        {
          id: "qvOcCQXZVg0",
          active: false,
        },
        {
          id: "YXNC3GKmjgk",
          active: false,
        },
      ],
    };
  }
  handleClick = (props) => {};
  render() {
    return (
      <div className="serviceswrap">
        <div className="servicesbdrop">
          <div className="primarywrap">
            <div className="primaryvideo">
              <div className="carousel">
                <div className="slider">
                  {this.state.ids.map((i) => (
                    <Image
                      className="carouselitem"
                      rounded
                      fluid
                      src={
                        "http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"
                      }
                      size="small"
                    />
                  ))}
                </div>
              </div>
            </div>
            <List size="big" className="servicesList">
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">3D Printing</List.Header>
                  <List.Description>
                    Print your design using our 3d-printer.
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">CNC Machining</List.Header>
                  <List.Description>
                    Print your design using our CNC machienery.
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">Personalised Designs</List.Header>
                  <List.Description>
                    Design your idea to suite your needs.
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">Laser Etching</List.Header>
                  <List.Description>
                    Elegant designs etched onto wood.
                  </List.Description>
                </List.Content>
              </List.Item>
              <List.Item>
                <List.Icon size="big" name="cog" />
                <List.Content>
                  <List.Header as="a">Wood Working</List.Header>
                  <List.Description>
                    Build custom designed indoor and outdoor wooden signage.
                  </List.Description>
                </List.Content>
              </List.Item>
            </List>
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

您可以在每个映射组件中有一个 button，如下所示。

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

然后在 class 组件内创建 changeActiveField 方法，用于 active 相关对象中的字段更改。

changeActiveField = (id) => {
  this.setState({
    ids: this.state.ids.map((obj) =>
      obj.id === id ? { ...obj, active: false } : obj
    ),
  });
};

Answer 2

嗯，其实很简单...

onClick={() => {
                  this.setState((prevState) => ({
                    ids: prevState.ids.map((ob) =>
                      ob.id !== i.id
                        ? { ...ob, active: false }
                        : { ...ob, active: true }
                    ),
                  }));
                }}

此匿名函数找到具有 id!== i.id 的 objects 并将其 objects 更新为 active: false，然后将 object 更新为 id === i.id

然后这个 （下一个代码块） 找到具有 active: true 和 returns 的 object 它的 id: value

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

然后传递到元素 activevid 中，完成 placeholder 的 URL 和 iframe 的 id检索 youtube url.

 <div className="activevid">
          <Embed
            active
            autoplay={true}
            color="white"
            hd={false}
            id={this.firstActiveId(this.state.ids)}
            iframe={{
              allowFullScreen: true,
              style: {
                padding: 0,
              },
            }}
            placeholder={
              "http://img.youtube.com/vi/" +
              this.firstActiveId(this.state.ids) +
              "/hqdefault.jpg"
            }
            source="youtube"
          />
        </div>

这是查看展示位置的完整组件。

import React, { Component } from "react";
import { Embed, Image } from "semantic-ui-react";
import "./Player.css";

export default class Player extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ids: [
        {
          id: "iCBvfW08jlo",
          active: false,
        },
        {
          id: "qvOcCQXZVg0",
          active: true,
        },
        {
          id: "YXNC3GKmjgk",
          active: false,
        },
      ],
    };
  }
  firstActiveId = () => {
    for (var i = 0; i < this.state.ids.length; i++) {
      if (this.state.ids[i].active) {
        return this.state.ids[i].id;
      }
    }
  };

 

  render() {
    return (
      <div className="carouselwrap">
        <div className="activevid">
          <Embed
            active
            autoplay={true}
            color="white"
            hd={false}
            id={this.firstActiveId(this.state.ids)}
            iframe={{
              allowFullScreen: true,
              style: {
                padding: 0,
              },
            }}
            placeholder={
              "http://img.youtube.com/vi/" +
              this.firstActiveId(this.state.ids) +
              "/hqdefault.jpg"
            }
            source="youtube"
          />
        </div>
        <div className="thumbs">
          {this.state.ids.map((i) => (
            <>
              <Image
                className="carouselitem"
                rounded
                onClick={() => {
                  this.setState((prevState) => ({
                    ids: prevState.ids.map((ob) =>
                      ob.id !== i.id
                        ? { ...ob, active: false }
                        : { ...ob, active: true }
                    ),
                  }));
                }}
                src={"http://img.youtube.com/vi/" + i.id + "/hqdefault.jpg"}
                size="small"
              />
            </>
          ))}
        </div>
      </div>
    );
  }
}

如何检查状态对象数组的 return 值并使用它来识别从哪个对象获取数据

How to check and return value of state object array and use that to identify which object to take data from

javascript

reactjs

state

semantic-ui