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

Question

我在React中将异步函数调用到外部API时遇到问题，我希望从两个单独的事件(表单的onSubmit和单独搜索结果的onClick(调用该函数。

我有以下React组件：

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;

SearchCompanyProfile.js

import React from 'react'
const SearchCompanyProfile = (props) => {
return (
<div>
<form onSubmit={props.getCompanyProfile} >
<input type="text" name="ticker" placeholder="Enter Ticker..."/>
<button value="Search" type="submit">
Search
</button>
</form>
</div>
)
}
export default SearchCompanyProfile;

SearchTicker.js

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;

TickerResults.js

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;

我的目标是通过提交SearchCompanyProfile表单和单击tickerResults组件中的ticker来调用异步函数fetchCompanyProfile。

我都试过了：

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)

在这两种情况下，如果正确的事件以正确的顺序发生，则它都是有效的，但在第一种情况中；值不能在未定义的"上运行；如果我通过tickerResults组件使用onClick事件，而在第二种情况下，innerHTML只是来自searchCompanyProfile表单的表单输入，因此调用fetch时没有正确的值。

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

Answer 1

你需要在里面调用setCompany({data}(，因为它是promise

function App() {
const [company, setCompany] = useState([]);
const [price, setPrice] = useState([]);
const [symbol, setSymbol] = useState([]);
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();
fetch('https://someapicompany.com/profile/${company}?apikey=xyz')
.then(res => res.json())
.then(data => {
setCompany({ data })
});
}
console.log(company.data)
return (
<div className="App">
<SearchTicker/>
<SearchCompanyProfile getCompanyProfile={fetchCompanyProfile}/>
<TickerResults ticker={symbol} getTicker={fetchCompanyProfile}/>
<CompanyProfile company={company}/>
</div>
);
}

Answer 2

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

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