Javascript React-从单独的onSubmit和onClick事件调用相同的函数

我在React to External API中调用异步函数时遇到了一个问题，我希望从两个单独的事件调用该函数，一个是表单的onSubmit，另一个是从单独搜索的结果调用onClick

我有以下组件：

App.js：

import React, { useState, useEffect } from 'react'
import './App.css';
import Ticker from './compoments/Ticker'
import SearchTicker from './compoments/SearchTicker'
import TickerResults from './compoments/TickerResults'
import SearchCompanyProfile from './compoments/SearchCompanyProfile';

function App() {
  const [company, setCompany] = useState([])
  const [price, setPrice] = useState([])
  const [symbol, setSymbol] = useState([])

     async function fetchCompanyProfile(e) {
      let company = '';
      if(e.target.target.ticker.value){
        company = e.target.ticker.value
        } else {
        company = e.target.innerHTML;
        } 
      console.log(company)
      e.preventDefault() 
      e.target.reset()
        const companyData = await fetch(https://someapicompany.com/profile/${company}?apikey=xyz)
          .then(res => res.json())
          .then(data => data)
            setCompany({data: companyData})
    }

    console.log(company.data)
 
  return (
    <div className="App">
        <SearchTicker getTicker={fetchTicker}/>
        <SearchCompanyProfile getCompanyProfile={fetchCompanyProfile}/>
        <TickerResults ticker={symbol} getTicker={fetchCompanyProfile}/>
        <CompanyProfile company={company}/>
    </div>
  );
}

export default App;

-及-

在这两种情况下，如果正确的事件以正确的顺序发生，它都会工作，但在第一种情况下，如果通过tickerResults组件使用onClick事件，我会遇到“value cannot run on undefined”，在第二种情况下，innerHTML只是来自searchCompanyProfile表单的表单输入，因此不会使用正确的值调用fetch

---

我意识到这是一个冗长的问题，但任何建议都将不胜感激。

对此，您需要在内部给setCompany（{data}）打电话，因为这是承诺

函数应用程序（）{
const[company，setCompany]=useState（[]）；
const[price，setPrice]=useState（[]）；
const[symbol，setSymbol]=useState（[]）；
函数fetchCompanyProfile（e）{
让公司=''；
if（如目标、目标、股票代码值）{
公司=e.target.ticker.value
}否则{
company=e.target.innerHTML；
}
控制台日志（公司）；
e、 预防默认值（）；
e、 target.reset（）；
取（'https://someapicompany.com/profile/${company}？apikey=xyz'）
.then（res=>res.json（））
。然后（数据=>{
setCompany（{data}）
});
}
console.log（company.data）
返回(
);
}

以下是异步/等待解决方案：

async function fetchCompanyProfile(e) {
      let company = '';
      if(e.target.innerHTML){
        company = e.target.innerHTML;
        } else {
        company = e.target.ticker.value;
        } 
      console.log(company)
      e.preventDefault() 
      e.target.reset()
      let companyData = await fetch(https://someapicompany.com/profile/${company}?apikey=xyz)
      setCompany({data: companyData.json()})
    }

---

谢谢你的回复！谢谢你的回复！如果答案正确，请在您的案例中将其设置为解决方案

import React from 'react'

const SearchTicker = (props) => {


    return (
        <div>
            <form onSubmit={props.getTicker}>
                <input type="text" name="symbol" placeholder="Enter Compamy Name..."/>
                <button value="Search" type="submit">
                Search
                </button>

            </form>
        </div>
    )
}

export default SearchTicker;

import React from 'react'

const TickerResults = (props) => {
    console.log(props)
    return (
        <div>
            {props.ticker.data && props.ticker.data.map(x => <p name="ticker" value={x.symbol} onClick={props.getTicker}>{x.symbol}</p>)}
        </div>
    )
}

export default TickerResults;

async function fetchCompanyProfile(e) {
      let company = '';
      if(e.target.ticker.value){
        company = e.target.ticker.value;
        } else {
        company = e.target.innerHTML;
        } 
      console.log(company)
      e.preventDefault() 
      e.target.reset()
        const companyData = await fetch(https://someapicompany.com/profile/${company}?apikey=xyz)
          .then(res => res.json())
          .then(data => data)
            setCompany({data: companyData})
    }

    console.log(company.data)

async function fetchCompanyProfile(e) {
      let company = '';
      if(e.target.innerHTML){
        company = e.target.innerHTML;
        } else {
        company = e.target.ticker.value;
        } 
      console.log(company)
      e.preventDefault() 
      e.target.reset()
        const companyData = await fetch(https://someapicompany.com/profile/${company}?apikey=xyz)
          .then(res => res.json())
          .then(data => data)
            setCompany({data: companyData})
    }

    console.log(company.data)

async function fetchCompanyProfile(e) {
      let company = '';
      if(e.target.innerHTML){
        company = e.target.innerHTML;
        } else {
        company = e.target.ticker.value;
        } 
      console.log(company)
      e.preventDefault() 
      e.target.reset()
      let companyData = await fetch(https://someapicompany.com/profile/${company}?apikey=xyz)
      setCompany({data: companyData.json()})
    }