Javascript 返回两个相同的属性，而不是ReactJS中的一个

我有一个问题，我的React应用程序在一个查询中保存了两个相同的属性

在两个输入字段中输入数据并单击

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

import React，{useState}来自“React”；
导出默认函数App（）{
const[querys，setquerys]=useState（[]）；
const[symbol，setSymbol]=使用状态（“”）；
const[price，setPrice]=使用状态（“”）；
const onChangeSymbol=e=>{
设置符号（如目标值）；
};
const onChangePrice=e=>{
设定价格（即目标价值）；
};
const onClick=（）=>{
如果（符号！==“”&价格！==“”）{
setQueries（（查询）=>{
push（`${symbol}${price}`）；
返回查询；
});
设置符号（“”）；
设定价格（“”）；
}
}
返回(
价格警报历史记录

{querys.map（query=>
{query}
）}

设置
);
}

---

目标：我只想接收一个属性，而不是它的两倍。

您只需要修复您的函数，它就会正常工作

const onClick = () => {
  if (symbol !== "" && price !== "") {
    setQueries((queries) => {
      return [ ...queries, `${symbol}${price}`] // fix here
    });
    setSymbol("");
    setPrice("");
  }
}

import React，{useState}来自“React”；
导出默认函数App（）{
const[querys，setquerys]=useState（[]）；
const[symbol，setSymbol]=使用状态（“”）；
const[price，setPrice]=使用状态（“”）；
const onChangeSymbol=e=>{
设置符号（如目标值）；
};
const onChangePrice=e=>{
设定价格（即目标价值）；
};
const onClick=（）=>{
如果（符号！==“”&价格！==“”）{
setQueries（（查询）=>{
返回[…查询，`${symbol}${price}`]
});
设置符号（“”）；
设定价格（“”）；
}
}
返回(
价格警报历史记录

{querys.map（query=>
{query}
）}

设置
);
}

我会对它进行重构，使价格和符号成为带有键的对象

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [queries, setQueries] = useState([]);
  const [symbol, setSymbol] = useState("");
  const [price, setPrice] = useState("");

  const onClick = () => {
    if (symbol !== "" && price !== "") {
      const product = {
        symbol: symbol,
        price: price
      };

      setQueries([...queries, product]);
      setSymbol("");
      setPrice("");
    }
  };

  return (
    <div className="App">
      <h6>Price Alert History</h6>
      <ul>
        {queries.map(query => (
          <li>
            {query.symbol} {query.price}
          </li>
        ))}
      </ul>
      <input
        type="text"
        placeholder="Symbol"
        value={symbol}
        onChange={e => setSymbol(e.target.value)}
      />
      <input
        type="number"
        placeholder="Price"
        value={price}
        onChange={e => setPrice(e.target.value)}
      />
      <button type="submit" onClick={onClick}>
        Set
      </button>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
导出默认函数App（）{
const[querys，setquerys]=useState（[]）；
const[symbol，setSymbol]=使用状态（“”）；
const[price，setPrice]=使用状态（“”）；
const onClick=（）=>{
如果（符号！==“”&价格！==“”）{
常数乘积={
符号:符号,，
价格：价格
};
设置查询（[…查询，产品]）；
设置符号（“”）；
设定价格（“”）；
}
};
返回(
价格警报历史记录

{querys.map（查询=>(

{query.symbol}{query.price}

))}

setSymbol（e.target.value）}
/>
setPrice（即target.value）}
/>
设置
);
}

谢谢您的回答！这是正确的，而且很简单，对不起，我是react的新手。投票通过并确认，感谢您的帮助@Hexycode我建议你将此标记为已接受答案，答案旁边应该有一个勾号，在投票按钮下面，单击该按钮。该死，你敢打赌我会这么做：D@DaneBrouwer我需要再等4分钟才能批准。Stackoverflow规则：）我会像以前一样重构它，因为您不希望价格和名称是字符串