Next js -如何更新或清除/重置const数组值?

Question

我是前端开发的初学者。我正在做下一个js项目。

我的任务是在表单提交上显示结果，我已经完成了。下一个任务是重置表单，也清除/重置按钮点击搜索结果。我找不到解决方案，我该如何重置/清除它

这是我到目前为止所尝试的:

import { useForm } from 'react-hook-form';
import { useState } from "react";
import { yupResolver } from '@hookform/resolvers/yup';
import * as Yup from 'yup';
const userEndPoint = '/api/users/';
const { searchResults = [] } = [];
export default function Home() {
const [userSearchResults, setUserSearchResults] = useState({ result: [] });
const validationSchema = Yup.object().shape({
searchQuery: Yup.string()
.required('This field is required'),
});
const formOptions = { resolver: yupResolver(validationSchema) };
const { errors } = formState;
const resetFunction = async () => {
setUserSearchResults([]);
}
const onSubmitFunction = async (event) => {
console.log("search query =====> ",event.searchQuery)
const response = await fetch(userEndPoint+event.searchQuery)
const data = await response.json()
searchResults = data.results;
userSearchResults = data.results;
};

return (
<div className="card m-3">
<h5 className="card-header">Example App</h5>
<div className="card-body">
<form onSubmit={handleSubmit(onSubmitFunction)}>
<div className="form-row row">
<div className="col-6 d-flex align-items-center">
<input name="searchQuery" type="text" {...register('searchQuery')} className={`form-control ${errors.searchQuery ? 'is-invalid' : ''}`} /> 
<div className="invalid-feedback">{errors.searchQuery?.message}</div>
</div>
<div className="col-6">
<button type="submit" className="btn btn-primary mr-1">Search</button>
<button type="button" onClick={() => resetFunction()} className="btn btn-secondary">Clear</button>
</div>
</div>

</form>
</div>
<div className="card-body">
<p className="card-header">Search results: </p>
{userSearchResults}
{ <ul>
{ searchResults.map( result => {
const {id, name, image} = result;
return (
<li key={id} className='card'>
<h3>{name}</h3>
</li>
)
} ) }
</ul> }
</div>
</div>
);
}

请纠正我。高度赞赏，如果建议我的最佳做法。谢谢你！

Answer 1

我将假设从你的API返回的数据是一个对象数组，请尝试这个，让我知道如果工作:

export default function Home() {
const [userSearchResults, setUserSearchResults] = useState([]);
const validationSchema = Yup.object().shape({
searchQuery: Yup.string().required("This field is required"),
});
const formOptions = { resolver: yupResolver(validationSchema) };
const { errors } = formState;
const resetFunction = () => {
setUserSearchResults([]);
};
const onSubmitFunction = async (event) => {
console.log("search query =====> ", event.searchQuery);
const userEndPoint = "/api/users/";
const response = await fetch(userEndPoint + event.searchQuery);
const data = await response.json();
setUserSearchResults(data.results);
};
return (
<div className="m-3 card">
<h5 className="card-header">Example App</h5>
<div className="card-body">
<form onSubmit={handleSubmit(onSubmitFunction)}>
<div className="form-row row">
<div className="col-6 d-flex align-items-center">
<input
name="searchQuery"
type="text"
{...register("searchQuery")}
className={`form-control ${
errors.searchQuery ? "is-invalid" : ""
}`}
/>
<div className="invalid-feedback">
{errors.searchQuery?.message}
</div>
</div>
<div className="col-6">
<button type="submit" className="mr-1 btn btn-primary">
Search
</button>
<button
type="button"
onClick={() => resetFunction()}
className="btn btn-secondary"
>
Clear
</button>
</div>
</div>
</form>
</div>
<div className="card-body">
<p className="card-header">Search results: </p>
<ul>
{userSearchResults.length > 0 && userSearchResults.map((result) => {
const { id, name, image } = result;
return (
<li key={id} className="card">
<h3>{name}</h3>
</li>
);
})}
</ul>
</div>
</div>
);
}