小编Dar*_*ren的帖子

如何阻止<video>自动播放集在加载后在本机设备播放器中打开？

在 React 组件中，我通过以下方式添加视频

return (
  <video style={{objectFit: 'cover', width: '100%', height: '80vh'}} id="background-video" loop muted autoPlay>
     <source src={this.state.videoURL} type="video/mp4" />
     <source src={this.state.videoURL} type="video/ogg" />
  </video>
)

视频源定义为

this.state = {
    videoURL: '//videos.ctfassets.net/1lmibopww0w9/5U4jOdHuRq62cygeyokaW6/f5444869997a7297f19ea847ccb16ae9/Black_Sands.mp4'
}

视频按预期在桌面浏览器上加载并与网页一起放置。然而，在移动浏览器上，视频会在浏览器中加载，然后在本机播放器中全屏打开。

如何定义在移动设备上播放并在本机播放器中打开的视频？

我在下面的代码中收到三个错误eslint,虽然该函数似乎在应用程序中按预期工作.

错误:

[eslint] Unexpected unnamed function. (func-names)
[eslint] Unexpected function expression. (prefer-arrow-callback)
[eslint] Do not access Object.prototype method 'hasOwnProperty' from target object. (no-prototype-builtins)

码:

const getCount = campaignData.reduce(function(acc, curr) {
  if (!acc.hasOwnProperty(curr.status)) {
    acc[curr.status] = 1
  } else {
    acc[curr.status] += 1
  }
  return acc;    
}, {});

我在renderReactJS组件中使用{getCount.active}.

在它工作的时候,我应该忽略它吗？

我怎么能拆分array的images中的object？

例如,使用下面的JSON.如何生成return string每个itemUrl和它相关的productCode？

这个JSON

{
  "products": [
    {
      "productCode": "ID1",
      "images": [
        {
          "id": 1,
          "itemUrl": "https://img.com/1.JPG"
        },
        {
          "id": 2,
          "itemUrl": "https://img.com/2.JPG"
        }
      ]
    },
    {
      "productCode": "ID2",
      "images": [
        {
          "id": 3,
          "itemUrl": "https://img.com/3.JPG"
        },
        {
          "id": 4,
          "itemUrl": "https://img.com/4.JPG"
        },
        {
          "id": 5,
          "itemUrl": "https://img.com/5.JPG"
        }
      ]
    }
  ]
}

变

https://img.com/1.JPG
https://img.com/2.JPG
https://img.com/3.JPG
https://img.com/4.JPG
https://img.com/5.JPG

目前,如果我使用

for (const tour of data.products) { …

I am having some troubles with useState when listening to history changes in useEffect.

When the pathname changes, setState is initiated but then the state is added back.

For example, I have a flag component that collects groups of notifications, but on the pathname change, I want all flags to be dismissed and removed from state.

The flag component

const PageFlag = ({ history }: InterfaceProps) => {
const { contextData, dismissFlag, dismissAllFlags } = useContext(GlobalConsumer);

  useEffect(() => …

有一个包含三个类别的custom-taxonomy调用，称为 、和。campaign_actiondraftlivepaused

我想只显示每个的计数，但不在列表中。

例如，我想将每个单独的计数回显为 -

<li>Draft (<?php //code to display a number count for drafts ?>)</li>
<li>Live (<?php //code to display a number count for live ?>)</li>
<li>Paused (<?php //code to display a number count for paused ?>)</li>

我已经通过显示成功完成了此操作

foreach ( $terms as $term ) {
   echo '(' . $term->count . ')';
 }

但是，这对我不起作用，我想$count单独获取每个。

感谢您的帮助。

编辑

为了进一步展示我目前所拥有的

    <?php  
$terms = get_terms('campaign_action');

 if ( !empty( $terms ) && !is_wp_error( $terms ) ){

 echo …

如何在数组中组合数据const = menuGallery,menuCompany以及menuTour在其中调用所有数据menuData(参见下面的代码),以便我li应该显示graphQl来自所有三个数据的数据const = menuData

render() {
  const menuGallery = get(this.props, 'data.allContentfulImageGallery.edges')
  const menuCompany = get(this.props, 'data.allContentfulCompanyPage.edges')
  const menuTour = get(this.props, 'data.allContentfulTourPage.edges')
  const menuData = [{menuGallery},{menuCompany},{menuTour}]

  return(
    {menuData.map(({ node: page })=> (
      <li className={slug === page.slug ? "selected" : ""} key={page.id}><a href={`/${page.slug}`}>{page.title}</a></li>
  ))}

如果我将电流更改const menuData为常量menuData = menuGallery,它将显示来自的数据,allContentfulImageGallery但在组合倍数时,它们不会映射数据.

该graphQl查询

export const menuQuery = graphql`
query menuQuery($slug: String!) {
    allContentfulCompanyPage(sort: {fields: …

如何从数组中获取包含特定值的对象数？

利用componentDidMount获得的数据存储在公司的FireStore db作为

componentDidMount() {
 db.collection(`company/${this.props.userID}/campaigns`).onSnapshot(collection => {
  const campaigns = collection.docs.map(doc => doc.data());
  this.setState({ 
    campaigns,
   });
 });
}

这将安装数据,this.state但我想通过其status字段获取每个数据的计数值.下面是一个示例,而我正在尝试获取= length的条目.statusactive draft paused

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      campaigns: [{
          id: 1,
          status: "draft",
        },
        {
          id: 2,
          status: "active",
        },
        {
          id: 3,
          status: "draft",
        },
        {
          id: 4,
          status: "paused",
        }
      ]
    };
  }

  render() {
    const totalCampaigns = this.state.campaigns
    const activeCampaigns …

在页面包装component我设置state在componentDidMount处理logging身份验证

componentDidMount() {
  if (typeof window !== 'undefined') {
    firebase.auth.onAuthStateChanged(authUser => {
      authUser
        ? this.setState(() => ({ authUser }))
        : this.setState(() => ({ authUser: null }));
    });
  }
}

但是,在某些页面渲染上我收到此错误.

Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

显然,componentWillUnmount我需要用来卸载组件但是我要卸载什么,setState或者firebase.auth.onAuthStateChanged？