Question

目前用户在搜索栏下方看不到任何内容，直到他们按下提交按钮提交搜索，因为它将显示数据的 userState 更改为 true。在他们按下按钮后，当用户输入时显示发生变化，他们不再需要按下提交按钮来查看显示的变化。我不想它那样做

我希望显示仅在他们按下提交按钮时改变，但我不知道该怎么做

 function Schedule(props){
    //array hook for calendar data
    const [calendars,setCalendars] = useState([])
    //string hook for what the user searches
    const [search, setSearch] = useState("");
    //used to inform user of when data is loading
    const [loading, setLoading] = useState(false);
    const [display, setDisplay] = useState(false);
   //array hook for filtering out calendars as user is typing
   const [filteredCalendars, setFilteredCalendars] = useState([]);

// get schedules for playlists from API (in this case, JSON files)
useEffect(()=>{
    setLoading(true);
    fetch('data/scheduled_playlist.json',{
       headers:{
           'Content-Type': 'application/json',
           'Accept': 'application/json'
       }
   }).then(function(response){
       console.log("hello")
       console.log(response)
       return response.json()
   }).then(function(jsonCalendars){
       console.log(jsonCalendars)
       setCalendars(jsonCalendars)
       setLoading(false);
   })
},  [])

useEffect(() => {
    setFilteredCalendars(
        calendars.filter( calendar =>
            calendar.storeID.toString().startsWith(search)
        )
    );
  }, [search, calendars]);

if (loading) {
    return <p>Loading calendars...</p>;
}



function showDisplay() {
    setDisplay(true);
}

var result = "";
if (display) {
    result = <div>
            {filteredCalendars.map((calendar) => ( 
            <Calendar calendar={calendar}/>))}
        </div>
    // setSearch(" ");
}

return(
    <div>
        <div className="text-center">
            <h1>Schedule Playlists</h1>
        </div>                        

        <Form onSubmit={e => {e.preventDefault(); showDisplay()}}>
            <div className="search-box">
                <BsSearch/> <input type="text"  placeholder="Search calendar by store ID..." onSubmit = {e => setSearch(e.target.value)}/>
                <Button type="submit">Submit form</Button>
            </div>
            
        </Form>

        <div>
            {result}
        </div>



    </div>
    
)
}

   export default Schedule

Answer 1

在第二个 useEffect 中，每次 filteredCalenders 更改时都会更新 search。

useEffect(() => {
    setFilteredCalendars(
        calendars.filter( calendar =>
            calendar.storeID.toString().startsWith(search)
        )
    );
  }, [calendars]);

从依赖数组中移除 search 将使得 setFilteredCalendars 仅在 calendars 更改时被调用。

如果您想了解更多信息，请访问有关 useEffect 数组的 React 文档的链接：

https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects

如何仅在按下提交按钮时更改显示，而不是在更改搜索时更改显示

1 个答案: