如何显示从控制台日志到网站反应的数据？

问题描述

在我的代码中，我可以通过发布请求显示可用的公寓。但是，这只能显示在 console.log 中。但是我想在按下按钮后将它显示为网站上的列表。随后，我想实现出现的网页（按下按钮后）将显示现在显示在控制台日志中的可用公寓列表。但是，我对如何使用当前代码实现这一目标感到困惑。

function Search() {
    const history = useHistory();

    const [startDate,setStartDate] = useState(new Date());
    const [endDate,setEndDate] = useState(new Date());

    const [numberOfbeds,setNumberOfbeds] = useState();
 
    const selectionRange = {
      startDate: startDate,endDate: endDate,key: "selection"
    };

    const handleNumberOfbedsChange = (event) => setNumberOfbeds(event.target.value);

  
    function handleSelect(ranges) {
      setStartDate(ranges.selection.startDate);
      setEndDate(ranges.selection.endDate);
    }

    const onSearch = useCallback(() => {
      console.log("startDate: ",startDate);
      console.log("endDate: ",endDate);
      console.log("numberOfbeds",numberOfbeds);
   

      axios
        .post(`/availableapartments`,{
          startDate,endDate,numberOfbeds
        })
        .then((res) => {
         console.log(res);
         console.log(res.data);
       
         history.push('/availableapartments')

        }); 

    },[startDate,numberOfbeds]);
  
 

    return (

      
      <div className="datepickersearch">
        <DaterangePicker ranges={[selectionRange]} onChange={handleSelect} />
  
        <h2> Number of guests</h2>
        <input min={0} defaultValue={2} max={7} type="number"  value={numberOfbeds}  onChange={handleNumberOfbedsChange}/>
        <Button onClick={onSearch}>Search Apartments</Button>
      
       
        
      </div>
    );
  }
  
  export default Search;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）