我有一个输出，我想以最多五个值的数组显示它

Question

我在 setSearchHistory(search); 中有输出我在历史记录中显示它：{searchHistory} 目前我能够记录当前值并在更改输出时显示更新值。 我希望以前的输出和新输出像数组一样显示，最多可以显示五个位置。

    const [city, setCity] = useState(null);
    const [search, setSearch] = useState("Dehradun");
    const [searchHistory, setSearchHistory] = useState([]);

    useEffect ( () => {
        const fetchApi = async () => {
            const url = `https://api.openweathermap.org/data/2.5/weather?q=${search}&units=metric&appid=7938d9005e68d8b258a109c716436c91`
            const response = await fetch(url);  
            const resJson = await response.json();
            setCity(resJson.main);
        };
        fetchApi();
},[search] )

    const handleClick = event => {
        event.preventDefault();
        setSearchHistory(search);
        };

return(
        <>
            <div className="box">
                <div className="inputData">
                <input
                id="btnc"
                type="search" 
                value={search}
                className="inputFeild" 
                onChange={ (event) => { setSearch(event.target.value) }}
               />
               <button onClick={handleClick}>Click</button>
                </div>
             <input className="is"></input>
             <h3 className="tempmin_max">
                  History: {searchHistory}
                </h3>
           {!city ? (
            <p className="errorMsg">Enter City Name</p>
           ) : (
            <div>
               
                <div className="info">
                <h2 className="location">
                <i className="fa-solid fa-street-view"> </i>{search}
                </h2>
                <h1 className="temp">
                {city.temp}
                </h1>
                <h3 className="tempmin_max">
                   Min : {city.temp_min} | Max : {city.temp_max}
                </h3>
                </div>
                <div className="wave -one"></div>
                <div className="wave -two"></div>
                <div className="wave -three"></div>
            </div>
            ) }
            </div>
        </>
    ) 
}

export default Tempapp;```

Answer 1

你可以这样做：

let arr = [];

const handleClick = event => {
  event.preventDefault();
  arr.push(search)
  setSearchHistory(arr);
};

现在searchHistory中有一个数组。 您需要使用map功能来显示搜索历史。