目前，我在一个页面上有一个表单。我希望在表单下面显示最新的表单提交，但它将显示所有表单提交日期。我不知道如何处理这个问题。
下面是表单组件的代码，如果有帮助的话。
export default function TourneyForm() {
const [hallname, setHallName] = useState("");
const [name, setName] = useState("");
const [matricnumber, setMatricNumber] = useState("");
const [players, setPlayers] = useState(0);
const [sport, setSport] = useState("");
const [brackettype, setBracketType] = useState("");
const handleSubmit = (e: any) => {
e.preventDefault();
axios
.post(TOURNEY_URL, {
hallname: hallname,
name: name,
matricnumber: matricnumber,
players: players,
sport: sport,
brackettype: brackettype,
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
setHallName('')
setName('')
setMatricNumber('')
setPlayers(0)
setSport('')
setBracketType('')
};
return (
<>
<form onSubmit={handleSubmit}>
<div className="form-group row py-4">
<div className="col"></div>
<label className="col-1" htmlFor="hallname">
Hall Name
</label>
<div className="col-3">
<select
className="custom-select"
id="hallname"
value={hallname}
onChange={(e) => setHallName(e.target.value)}
>
<option selected>Name of Hall/RC</option>
<option value="Temasek Hall">Temasek Hall</option>
<option value="Eusoff Hall">Eusoff Hall</option>
<option value="KEVII Hall">KEVII Hall</option>
<option value="Kent Ridge Hall">Kent Ridge Hall</option>
<option value="Sheares Hall">Sheares Hall</option>
</select>
</div>
<div className="col"></div>
</div>
);}下面是我调用Form组件并尝试在下面显示最新提交的页面的代码
export default function CreateTourney() {
const[data, setData] = useState([])
axios.get(url)
.then (function (response) {
setData(response.data)
});
return (
<>
<NavBar />
<div className="row">
<div className="col"></div>
<span className="col-5 text-center fs-5 py-3">
Fill in and submit this form to create a new tournament bracket! Click "See all tournaments" to find
your newly created tournament.
<br /><br />
Note: One student number can only be registered for one tournament.
</span>
<div className="col"></div>
<hr />
</div>
<TourneyForm />
{data.filter(element.data == )}
{data.map((element) => <TourneyIndivListing data={element} />)}
</>
)
}我不知道如何处理这个问题。我尝试了几种方法，例如使用数据过滤器，或者使用if else语句来查看输入值是否与最新记录的值相同。然而，我不知道该传递什么作为参数，我不断得到错误。希望我能收到关于如何解决这个问题的提示。非常感谢。
这是网站的前端渲染
这是后端数据库的一个示例。
请让我知道如果你需要任何额外的信息。谢谢你！
1条答案
按热度按时间qmb5sa221#
如果我正确理解了您的问题，您希望在下面显示您的表单和最新提交的表单。提交新表单将重置输入并更新下面显示的最新提交。
我理解你的需求，你有两种可能性。
1.如果您只需要显示最后一个而不是所有提交，则仅从数据库中恢复最后一个提交。这样，您可以获得一些性能时间，特别是如果您有很多提交。在这种情况下，您需要更新后端代码，以便仅恢复上次提交的内容。对于SQL情况，它看起来像这样：
SELECT * FROM submissions ORDER BY created_at DESC LIMIT 1
然后，您应该更新您的CreateTourney组件，以处理单个提交，而不是一组提交：
我也会把你的axios调用放在一个函数中，让我们称之为“fetchSubmission”，并使用useEffect在组件挂载时调用它：
然后，将fetchSubmission（）函数添加到TourneyForm中：
现在，您应该在axios回调中从TourneyForm组件调用fetchSubmission函数，这样每次创建新提交时，它都会刷新您上次提交的文件。
1.恢复所有提交，从您的后端按created_date DESC排序：
SELECT * FROM提交ORDER BY created_at DESC
然后在CreateTourney组件中添加一个条件以显示所有提交或最后一个提交。
希望这能对你有所帮助