从API有条件地呈现表

Question

只有当按下按钮时，我才需要帮助呈现API中的表头和解析信息。当按下不同的按钮时，除了刷新页面之外，100多个对象的数组不会堆叠在一起。我正在使用React来编写这段代码。这段代码还有更多内容，但这只是一个片段，我想将其应用于其他按钮(3(。

我还考虑为每个API调用创建一个新文件来获取它们的信息，然后将它们导入到这个文件中，以便在按下按钮时执行。

import { useState } from 'react';
export default function Markets() {
const API_KEY = process.env.REACT_APP_MS_API_KEY;
const [dataEndOfDay, setEndOfDay] = useState('');
async function getEndOfDay() {
try {
const response = await axios.get(
`${BASE_URL}eod?access_key=${API_KEY}&symbols=AAPL`
);
console.log(response.data.data);
setEndOfDay(
response.data.data.map((row) => {
return (
<tr>
<td>{row.date}</td>
<td>{row.symbol}</td>
<td>${row.open}</td>
<td>${row.close}</td>
</tr>
);
})
);
} catch (error) {
console.error(error);
}
}

return (
<div className="market-button">
<button onClick={getEndOfDay}>Get End of Day Report</button>
<table>
<tr>
<th>Date</th>
<th>Symbol</th>
<th>Open</th>
<th>Close</th>
</tr>
{dataEndOfDay}
</table>
}

Answer 1

您只需要将表封装在if语句中。但也要从状态中删除空字符串，并将其保留为空或设置为null。

const [dataEndOfDay, setEndOfDay] = useState();
return (
<div className="market-button">
<button onClick={getEndOfDay}>Get End of Day Report</button>
{ dataEndOfDay && 
<table>
<tr>
<th>Date</th>
<th>Symbol</th>
<th>Open</th>
<th>Close</th>
</tr>
{dataEndOfDay}
</table>
}
<div>
)

但另一方面，你的代码并不是最好的性能，我建议重构它。你不应该为处于状态的行保存html数据，而应该只保存api中的数据，然后在渲染中循环。

import { useState } from 'react';
export default function Markets() {
const API_KEY = process.env.REACT_APP_MS_API_KEY;
const [dataEndOfDay, setEndOfDay] = useState();
async function getEndOfDay() {
try {
const response = await axios.get(`${BASE_URL}eod?access_key=${API_KEY}&symbols=AAPL`);
console.log(response.data.data);
setEndOfDay(response.data.data);
} catch (error) {
console.error(error);
}
}
return (
<div className="market-button">
<button onClick={getEndOfDay}>Get End of Day Report</button>
{
dataEndOfDay && 
<table>
<tr>
<th>Date</th>
<th>Symbol</th>
<th>Open</th>
<th>Close</th>
</tr>
{
dataEndOfDay.map(row => {
return (
<tr>
<td>{row.date}</td>
<td>{row.symbol}</td>
<td>${row.open}</td>
<td>${row.close}</td>
</tr>
);
}
}
</table>
}
</div>
);
}