如果 state.obj.val1 === true，return state.obj.val2

Question

我正在尝试在状态数组中查找对象键值，当找到该值时 (true) return 该对象中另一个键值的值。我真的很不擅长循环 :/ 我尝试了多种循环，这只是我最近的尝试。

州

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

我最近一次检索值的尝试 returning Array.prototype.map() expects a value to be returned at the end of arrow function

ifActiveField = this.ids.map((val) => {
    if (val["active"] === true) {
      return { ...val["id"] };
    }
  });

来自 active 对象的 id return 将被传递以呈现新组件。

这是当应用运行 时页面 return 的内容

我的完整代码

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,
        },
      ],
    };
  }

  ifActiveField = this.ids.map((val) => {
    if (val["active"] === true) {
      return { ...val["id"] };
    }
  });
  changeActiveField = (id, active) => {
    this.setState({
      ids: this.state.ids.map((obj) =>
        obj.id === id ? { ...obj, active: false } : obj
      ),
    });
  };

  render() {
    return (
      <div className="serviceswrap">
        <div className="servicesbdrop">
          <div className="primarywrap">
            <div className="primaryvideo">
            <Embed
                autoplay={false}
                width='100px'
                height='100px'
                color="white"
                hd={false}
                id={this.ifActiveField}
                iframe={{
                  allowFullScreen: true,
                  style: {
                    padding: 10,
                  },
                }}
              />
              <div className="carousel">
                <div className="slider">
                  {this.state.ids.map((i) => (
                    <Image
                      className="carouselitem"
                      rounded
                      fluid
                      onClick={() => this.changeActiveField(i.id)}
                      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>
    );
  }
}

编辑______________________________________________

供参考，三张图片包围在三文鱼BG下面link https://test.ghostrez.net/ 然后单击“服务”页面

这些将成为可点击的，以便在点击时。找到this.state.ids中对应的object并将this.state.ids.active设置为active:true.

这是我当前的问题 我正在尝试扫描 object 具有 active 值 true 的 state.ids.objects.active。当发现此对象时，对象 id 值应 returned.

例子该函数应该找到这个状态数组对象，并且 return iCBvfW08jlo.

{
          id: "iCBvfW08jlo",
          active: true,
        },

这样我就可以将该值传递给渲染适当的 <div className='primaryvideo'></div>

          <Embed
                autoplay={false}
                width='100px'
                height='100px'
                color="white"
                hd={false}
                id={this.ifActiveField}
                iframe={{
                  allowFullScreen: true,
                  style: {
                    padding: 10,
                  },
                }}
              />

Answer 1

不完全清楚你在问什么，你只想要第一个“活动”的ID吗？或者一组“活动”ID？

如果它只是第一个，则简单地遍历它们，并且 return 如果 active 为真，则正确的 id。

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;
    }
  }
}

console.log(firstActiveId(state.ids));

要在您的示例中使用该函数，只需调用它并传入 ID 数组即可。例如

ifActiveField = firstActiveId(this.ids);

如果你想使用 find 或其他一些也可以的...只需

ifActiveField = this.ids.find(x => x.active).id;

Answer 2

如果我没理解错的话，你有一个类似于多项选择题的问题，只能选择一个答案，你想检测当前选择的是哪一个。现在，有一个使用 Array.prototype.find 方法的基本解决方案，但您似乎对数组方法不是很熟悉，所以我将展示解决方案并解释会发生什么。

const conditionFunction = (id) => id.active;
const active = ids.find(conditionLambda);

find 方法接受一个参数——一个函数。然后，它遍历一个数组并使用当前元素调用该函数，数组中每个元素的当前索引。它 returns 传递函数 returns true.

的第一个元素

简单来说，如果我们采用您的数组，find 遍历 ids 中的每个元素并像这样调用 conditionLambda：conditionFunction(currentId, currentIndex):

conditionLambda({ id: "iCBvfW08jlo", active: true }, 0); // The first element in the array
conditionLambda({ id: "qvOcCQXZVg0", active: false }, 1); // The second element in the array

等等。

find returns conditionLambda returns true 的第一个元素。因此，在我们的例子中，第一个元素 id.active 是真实的。这是第一个元素，所以它 returns { id: "iCBvfW08jlo", active: true }.

Answer 3

我认为您正在寻找具有活动 true 的对象数组，如下所示：

const array = [
        {
            id: 1,
            active: true,
        },
        {
            id: 2,
            active: true,
        },
        {
            id: 3,
            active: false,
        },
    ];

    const filteredArray = array.filter((item) => item.active === true);

    console.log('filteredArray', filteredArray);

如果 state.obj.val1 === true，return state.obj.val2

if state.obj.val1 === true, return state.obj.val2

javascript

jsx

reactjs