输入不在反应功能组件中重新呈现答案

【问题标题】：Inputs not rerendering in react functional component输入不在反应功能组件中重新呈现
【发布时间】：2023-01-31 18:11:26
【问题描述】：

我正在尝试使用 React 构建一个预订应用程序，由于某种原因，当用户更改状态时，它不会在 UI 中重新呈现正确的数量。

如果我 console.log() guests 的值不会低于 0，但是 UI 显示的数量不正确。有什么建议么？

import React, { useEffect, useState } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import HotelDetails from './hotelDetails'
import '../styles/searchBar.css';



let linkStyle = { textDecoration: "none", color: "black" };

const SearchBar = (props) => {

    const navigate = useNavigate()

    const todaysDate = new Date();
    let tomorrow = new Date(todaysDate);
    tomorrow = tomorrow.setDate(tomorrow.getDate() + 1);

    const [location, setLocation] = useState('');
    const [startDate, setStartDate] = useState(todaysDate); // set check in date to todays date
    const [endDate, setEndDate] = useState(tomorrow); // set check out date, default tomorrow
    const [guests, setGuests] = useState(0);

    const [properties, setProperties] = useState([]);

    // debug
    console.log('check in', startDate);
    console.log('check out', endDate);
    console.log('todays date', todaysDate);
    console.log('guests', guests);

    function handleCheckInDate(e) {
        setStartDate(e)
    }
    function handleCheckOutDate(e) {
        setEndDate(e)
    }


    useEffect(() => {
        fetch(`http://localhost:5000/hotels/${location}`).then((response) => {
            response.json().then((data) => {
                setProperties(data);
            })
        })
        if (guests <= 0) {
            setGuests(0);
            // It does not re render in the input field
        }
        if (endDate <= startDate) {
            alert('Please select a date after your check in date');
            setEndDate(tomorrow);
        }

    }, [location, startDate, endDate, setEndDate, setStartDate, guests, setGuests])




    return (
        <>
            <div className='bar'>
                <h2 className='subtitle'>Find your perfect stay...</h2>
                <div className='searchBar'>
                    <div className='field'>
                        <input type='text' className='input' placeholder='Where to ?' onChange={(e) => setLocation(e.target.value)} required />
                    </div>
                    <p>Check in</p>
                    <div className='field'>
                        {<input type='date' className='input' placeholder={todaysDate} onChange={(e) => /*setStartDate(e.target.value)*/ handleCheckInDate(e.target.value)} required />}
                    </div>
                    <p>Check out</p>
                    <div className='field'>
                        {<input type='date' className='input' placeholder={tomorrow} onChange={(e) => /* setEndDate(e.target.value)*/ handleCheckOutDate(e.target.value)} required />}
                    </div>
                    <div className='field'>
                        <input type='number' className='input' placeholder='Number of guests' onChange={(e) => setGuests(e.target.value)} required />
                    </div>

.....

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您正在设置状态以反映输入更改，但您还需要反过来 - 您需要配置输入以反映状态。否则，状态值不执行任何操作。你需要

<input
  type='number'
  className='input'
  placeholder='Number of guests'
  onChange={(e) => setGuests(e.target.value)}
  value={guests}
  required
/>

但更好的方法是使用.valueAsNumber，这样你就可以设置一个数字而不是字符串来声明，并取当前值和 0 的最大值，而不是将逻辑放在useEffect 中。您可能还想account for non-integer numbers。

<input
  type='number'
  className='input'
  placeholder='Number of guests'
  onChange={(e) => {
    setGuests(Math.max(0, e.target.valueAsNumber));
  }}
  value={guests}
  required
/>

【讨论】：