我正在使用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) 我正在使用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,但是在任何时候我都只希望一个红色(即最近一次单击的红色)。
如果对此问题有任何不清楚的地方,请告诉我。
在阶级成分,我想我可能会做类似的东西这个。
在此处查看代码沙箱。
我正在尝试将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) 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 …
我的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) 我要根据日期对以下数据进行排序-不包括时间戳。
注意:我可以访问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) 在人们认为这与关于删除重复项的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) 我从很多角度遇到了这个问题,目前我的代码看起来像这样,并且出现以下错误:
属性“相册”在“从不”类型上不存在
我正在使用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) 我有一个使用钩子的反应组件。我的父组件如下所示:
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
我正在尝试在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) ecmascript-6 ×8
javascript ×8
reactjs ×6
typescript ×4
react-hooks ×2
html ×1
php ×1
reduce ×1
types ×1