微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

在我的代码中,我可以通过发布请求显示可用的公寓。但是,这只能显示在 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 举报,一经查实,本站将立刻删除。