正在尝试为Reactjs中的“获取股票数据”中的股票符号创建搜索函数

我正在尝试从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;

功能搜索栏（道具）{
const[innerSearch，setInnerSearch]=useState（“”）；
返回(
setInnerSearch（e.target.value）}
/>
props.onSubmit（innerSearch）}
>
搜寻
);
}
函数引号（）{
const[search，setSearch]=useState（“”）；
常量列=[
{headerName:“名称”，字段：“名称”，可排序：true，筛选器：true}，
{headerName:“打开”，字段：“打开”}，
{headerName:“Low”，field:“dayLow”}，
{headerName:“High”，field:“dayHigh”}，
{headerName:“Close”，字段：“previousClose”}，
{标题名称：“卷”，字段：“卷”}，
];
const[rowData，setRowData]=useState（[]）；
const API_token=“”；
变量API_调用=`https://financialmodelingprep.com/api/v3/quote/${search}？apikey=${API_token}`；
useffect（（）=>{
获取（API_调用）
.然后（（res）=>res.json（））
。然后（（数据）=>
data.map（（引号）=>{
返回{
name:quote.name，
open:quote.open，
dayLow:quote.dayLow，
dayHigh:quote.dayHigh，
previousClose:quote.previousClose，
卷：quote.volume，
};
})
)
。然后（（引号）=>setRowData（引号））；
}，[搜索]；
//onChange={onFilterTextChange}
返回(
股票行情

{rowData.length}
公司股票行情

转到未结库存API
);
}
导出默认报价；

给出您的示例，它应该会起作用，您能稍微解释一下预期行为与实际行为吗？或者如果你得到一个错误，你能在这里发布吗？这是我得到的错误×未处理的拒绝（TypeError）：data.map不是一个函数（匿名函数）C:/Users/johnp/Project/client/src/components/Pages/Quote.js:58 55 | var API_Call=

https://financialmodelingprep.com/api/v3/quote/${search}？apikey=${API_token}

；56 | 57 | useffect（（）=>{>58 | fetch（API|U调用）^59 |。然后（（res）=>res.json（））60 |。然后（data=>61 | data.map（quote=>{这意味着数据不是数组，它不能被迭代。记录响应并检查您在数据中接收到的内容。