小编pet*_*gan的帖子

react set state回调正确的方式传递参数

我正在使用React的setState方法,并在更新状态时调用另一个函数.

有关如何调用setState作为回调传递的函数的首选方法.

以下两种方法都有效,但使用其中一种方法有什么影响吗?

  this.setState(prevState => {
    return {
      result: '1-0'
    }
  }, this.clearResult(500))
Run Code Online (Sandbox Code Playgroud)

要么

  this.setState(prevState => {
    return {
      result: '1-1',

    }
  }, () => this.clearResult(500))
Run Code Online (Sandbox Code Playgroud)

我的clearPin方法如下所示.所有这些代码都在React组件中.

  clearResult(time) {

    setTimeout(() => {
      this.setState({
        result: '0-0'
      })
    }, time)

  }
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs

3
推荐指数
1
解决办法
4336
查看次数

用钩子切换活动状态

我正在使用React挂钩,并且遇到了不确定的操作。

我有一个渲染城市列表的父组件。

const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) => {
  return (
    <>
      {cities.map(city => {
        const [isActive, setActive] = useState(false);
        return <p onClick={() => setActive(true)} style={{ color: isActive ? "red" : "green" }}>{city}</p>;
      })}
    </>
  );
};
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是,每当我单击某个城市时,都会旋转一次red,但是在任何时候我都只希望一个红色(即最近一次单击的红色)。

如果对此问题有任何不清楚的地方,请告诉我。

在阶级成分,我想我可能会做类似的东西这个

在此处查看代码沙箱。

javascript ecmascript-6 reactjs react-hooks

3
推荐指数
1
解决办法
3777
查看次数

在子组件中输入 useState setter

我正在尝试将useStatesetter 传递给子组件,但不确定如何输入。

const Parent = () => {
   const [count, setCount] = useState(0);
   return(
     Child count={count} setCount={setCount} />
   );
}
Run Code Online (Sandbox Code Playgroud)

然后在Child组件中,我尝试键入 setter,但我看到以下错误。

类型“Dispatch<SetStateAction<string[]>>”不可分配给类型“() => void”。

我的代码看起来像这样

type Props = {
  count: number;
  // the issue is the line below
  setCount: () => void;
}

const Child = ({ count, setCount }: Props) => {
    .... code here
}
Run Code Online (Sandbox Code Playgroud)

javascript types typescript ecmascript-6 reactjs

3
推荐指数
2
解决办法
2042
查看次数

show dynamic select items mapping over array of objects

I have an array that looks like this:

const teamsAndPlayers = [
    {
        team: 'Liverpool',
        players: ['Salah', 'Henderson']
    },
    {
        team: 'Man Utd',
        players: ['Rashford', 'De Gea']
    },
    {
        team: 'Chelsea',
        players: ['Hazard', 'Willian']
    }
];
Run Code Online (Sandbox Code Playgroud)

I have 2 select boxes, the second of which is dynamic based on what the user selects. The issue I am having is that I am not sure the best way to find the related array based on the user choice. I know I …

javascript ecmascript-6 reactjs

3
推荐指数
1
解决办法
86
查看次数

php在循环期间将addtional p标签添加到html中

我的PHP遇到了奇怪的行为.它在我的html中添加了一个情感段落,但我无法弄清楚原因.

我正在循环一个看起来像这样的json对象

{
    "1495147646442": {
        "description": "Wonderful!",
        "fileNames": [
            "1.jpg",
            "2.jpg"
        ]
    }
}
Run Code Online (Sandbox Code Playgroud)

我的php看起来如下.

<?php
  $json = file_get_contents('auction.json');
  $json = json_decode($json);

  foreach ($json as $obj)
    {

      echo "<div class='row'>";
      echo "<p>" . $obj->description . "</p>";

      for ($x = 0; $x < count($obj->fileNames); $x++)
      {      
        echo "<img class='col-md-6' src=" . $obj->fileNames[$x] . ">"; 
      }

      echo "</div>";

  }
?>
Run Code Online (Sandbox Code Playgroud)

生成的html如下所示:

<div class='row'>
  <p>Wonderful!</p>
  <img class='col-md-6' src="1.jpg">
  <img class='col-md-6' src="2.jpg">
</div>


<div class='row'>
  <p></p>
</div>
Run Code Online (Sandbox Code Playgroud)

但是,我希望得到

<div class='row'>
  <p>Wonderful!</p>
  <img class='col-md-6' src="1.jpg"> …
Run Code Online (Sandbox Code Playgroud)

html php

2
推荐指数
1
解决办法
78
查看次数

根据对象中键的值将数组中的对象分组

我要根据日期对以下数据进行排序-不包括时间戳。

注意:我可以访问moment此任务。

我的数据如下所示:

const data = [
   {
     "fixture": "AC v Inter",
     "kickOffTime": "2018-06-14T15:00:00Z",
   },
   {
     "fixture": "DC v NYC",
     "kickOffTime": "2018-06-15T12:00:00Z",
   },
   {
     "fixture": "AFC v LPC",
     "kickOffTime": "2018-06-15T15:00:00Z",
   },
   {
      "fixture": "DTA v MC",
      "kickOffTime": "2018-06-15T18:00:00Z",
    },
    {
       "fixture": "LAC v GC",
       "kickOffTime": "2018-06-16T18:00:00Z",
    }
];
Run Code Online (Sandbox Code Playgroud)

我尝试了许多方法。我希望获得的最终结果是以下数据结构。

const updatedDataStructure = [
   {
     date: "2018-06-14",
     fixtures: [{
        "fixture": "AC v Inter",
        "kickOffTime": "2018-06-14T15:00:00Z",
      }]
   },
   {
     date: "2018-06-15",
     fixtures: [
      {
        "fixture": "DC v NYC",
        "kickOffTime": …
Run Code Online (Sandbox Code Playgroud)

javascript reduce ecmascript-6

2
推荐指数
1
解决办法
98
查看次数

从数组中删除多次出现的所有元素

在人们认为这与关于删除重复项的Stack Overflow上的所有其他答案相同之前,您可以查看返回的内容而不是我要查看的内容.

我想删除多次出现的所有元素.我尝试过以下方法:

const a = ['Ronaldo', 'Pele', 'Maradona', 'Messi', 'Pele'];

const uniqueArray = a.filter(function(item, pos) {
  return a.indexOf(item) == pos;
})

console.log(uniqueArray)
Run Code Online (Sandbox Code Playgroud)

我希望我uniqueArray成为

['Ronaldo', 'Maradona', 'Messi'];
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6

2
推荐指数
1
解决办法
440
查看次数

反应钩子和打字稿-类型'从不'属性'***'不存在

我从很多角度遇到了这个问题,目前我的代码看起来像这样,并且出现以下错误:

属性“相册”在“从不”类型上不存在

我正在使用React挂钩,但是从中data更新了的对象出现了错误useState。我不确定如何定义data属性albums或在何处执行此操作。

import React, { useState } from 'react';

interface ArtistProps {
   artistName: string,
}


const Artist: React.SFC< ArtistProps > = ({ artistName }) => {

    const [data, setData] = useState(null);

    return (
        <>
            <p>{artistName)}</p> // this is fine
            <p>{data.albums}</p> // error here
        </>
    );
}
Run Code Online (Sandbox Code Playgroud)

typescript reactjs react-hooks

2
推荐指数
1
解决办法
2360
查看次数

将挂钩传递给孩子打字稿的问题

我有一个使用钩子的反应组件。我的父组件如下所示:

const Parent = () => {

   const [isActive, setIsActive] = useState(false);

   return (
     <Child isActive={isActive} setIsActive={setIsActive} />
   );
}
Run Code Online (Sandbox Code Playgroud)

这是子组件

type Props = {
   isActive: boolean;
   setIsActive: () => void;
}
const Child = ({ isActive, setIsActive}: Props) {
   // component
} 
Run Code Online (Sandbox Code Playgroud)

我看到的错误是

类型错误:不能将类型'Dispatch <SetStateAction>'分配给>类型'()=> void'。TS2322

javascript typescript ecmascript-6 reactjs

2
推荐指数
1
解决办法
853
查看次数

应该在打字稿中定义什么类型的超时

我正在尝试在Typescript中编写一个反跳函数,但是不确定设置要分配给的变量的类型setTimeout。我的代码如下所示:

function debounced(func: () => void, wait: number) {
    // what type should timeout be here?
    let timeout: any;
    return () => {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
            func();
        }, wait);
    };
}
Run Code Online (Sandbox Code Playgroud)

javascript typescript ecmascript-6

2
推荐指数
1
解决办法
935
查看次数