javascript - 在 ReactJS 中返回两个相同的属性而不是一个
问题描述
我有一个问题,我的 React 应用程序在一个查询中保存了 2 个相同的属性。
在两个输入字段中输入数据并单击Set
按钮后,我收到双份相同的数据。
代码在这里
import React, { useState } from "react";
export default function App() {
const [queries, setQueries] = useState([]);
const [symbol, setSymbol] = useState("");
const [price, setPrice] = useState("");
const onChangeSymbol = e => {
setSymbol(e.target.value);
};
const onChangePrice = e => {
setPrice(e.target.value);
};
const onClick = () => {
if (symbol !== "" && price !== "") {
setQueries((queries) => {
queries.push(`${symbol}${price}`);
return queries;
});
setSymbol("");
setPrice("");
}
}
return (
<div className="App">
<h6>Price Alert History</h6>
<ul>
{queries.map(query => <li>{query}</li>)}
</ul>
<input
type="text"
placeholder="Symbol"
value={symbol}
onChange={onChangeSymbol}
/>
<input
type="number"
placeholder="Price"
value={price}
onChange={onChangePrice}
/>
<button type="submit" onClick={onClick}>Set</button>
</div>
);
}
目标:我只想获得一个财产而不是双重财产。
解决方案
您只需要修复您的功能,它就会正常工作
const onClick = () => {
if (symbol !== "" && price !== "") {
setQueries((queries) => {
return [ ...queries, `${symbol}${price}`] // fix here
});
setSymbol("");
setPrice("");
}
}
import React, { useState } from "react";
export default function App() {
const [queries, setQueries] = useState([]);
const [symbol, setSymbol] = useState("");
const [price, setPrice] = useState("");
const onChangeSymbol = e => {
setSymbol(e.target.value);
};
const onChangePrice = e => {
setPrice(e.target.value);
};
const onClick = () => {
if (symbol !== "" && price !== "") {
setQueries((queries) => {
return [ ...queries, `${symbol}${price}`]
});
setSymbol("");
setPrice("");
}
}
return (
<div className="App">
<h6>Price Alert History</h6>
<ul>
{queries.map(query => <li>{query}</li>)}
</ul>
<input
type="text"
placeholder="Symbol"
value={symbol}
onChange={onChangeSymbol}
/>
<input
type="number"
placeholder="Price"
value={price}
onChange={onChangePrice}
/>
<button type="submit" onClick={onClick}>Set</button>
</div>
);
}