reactjs - 尝试在 Reactjs 中获取股票数据时为股票代码创建搜索功能

Question

我正在尝试从 reactjs 中的免费 api 获取股票数据。股票代码的搜索功能有问题。

我可以使用文本进行搜索或过滤，但无法为股票代码创建搜索组件。如果有人可以提供帮助，那就太好了。我正在使用的这个 url 要求输入股票代码，当我在它的 url 中硬编码时它可以工作。

function SearchBar(props) {
  const [innerSearch, setInnerSearch] = useState("");
  return (
    <div>
      <input
        aria-labelledby="search-button"
        name="search"
        id="search"
        type="search"
        value={innerSearch}
        onChange={(e) => setInnerSearch(e.target.value)}
      />
      <button
        id="search-button"
        type="button"
        onClick={() => props.onSubmit(innerSearch)}
      >
        Search
      </button>
    </div>
  );
}

function Quote() {
  const [search, setSearch] = useState("");

  const columns = [
    { headerName: "Name", field: "name", sortable: true, filter: true },
    { headerName: "Open", field: "open" },
    { headerName: "Low", field: "dayLow" },
    { headerName: "High", field: "dayHigh" },
    { headerName: "Close", field: "previousClose" },
    { headerName: "Volume", field: "volume" },
  ];

  const [rowData, setRowData] = useState([]);
  const API_token = "";

  var API_Call = `https://financialmodelingprep.com/api/v3/quote/${search}?apikey=${API_token}`;

  useEffect(() => {
    fetch(API_Call)
      .then((res) => res.json())
      .then((data) =>
        data.map((quote) => {
          return {
            name: quote.name,
            open: quote.open,
            dayLow: quote.dayLow,
            dayHigh: quote.dayHigh,
            previousClose: quote.previousClose,
            volume: quote.volume,
          };
        })
      )
      .then((quotes) => setRowData(quotes));
  }, [search]);

  //onChange={onFilterTextChange}

  return (
    <div className="container">
      <h1>STOCK Quotes</h1>
      <SearchBar onSubmit={setSearch} />
      <p>
        <Badge colour="success">{rowData.length}</Badge>
        Stock Quotes of Companys
      </p>

      <div
        className="ag-theme-balham"
        style={{
          height: "300px",
          width: "800px",
        }}
      >
        <AgGridReact
          columnDefs={columns}
          rowData={rowData}
          pagination={true}
          paginationPageSize={8}
        />
      </div>
      <Button
        colour="info"
        size="sm"
        className="mt-3"
        href="https://financialmodelingprep.com/.org/developers/api"
        target="_blank"
      >
        Go to Open Stock API
      </Button>
    </div>
  );
}

export default Quote;

标签： reactjs