javascript - 在 ReactJS 中返回两个相同的属性而不是一个

Question

我有一个问题，我的 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>
  );
}

目标:我只想获得一个属性(property)而不是双重属性(property)。

Answer 1

您只需要修复您的功能，它就会正常工作

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