React中POST请求提交宾客数输入值为undefined的问题解决

当前宾客数取值为undefined是多处实现错误叠加导致的：

• input的onChange事件取值逻辑完全错误：React原生input触发change事件时，输入值存在event.target.value字段中，代码里写的event.numberOfGuests在原生事件对象上不存在，导致状态赋值永远为undefined
• 给input添加的event={[numberOfGuests]}是无意义的自定义属性，React不会识别这个属性与组件状态的绑定关系
• numberOfGuests状态没有设置与输入框默认值匹配的初始值，和输入框的defaultValue={2}完全割裂
• 把表单提交场景下才需要的event.preventDefault()逻辑放到了input的onChange回调中，属于逻辑错配，虽然不会直接导致取值错误，但会造成代码逻辑混乱

1. 修正input的onChange取值逻辑：从event.target.value获取输入值，转为数字类型后存入状态
2. 移除input上无效的自定义event属性，改用标准的value属性做受控绑定，让输入框显示值与组件状态保持同步
3. 给numberOfGuests设置初始值2，与输入框默认值对齐，避免初次提交时状态为空
4. 移除onChange回调中多余的event.preventDefault()，该方法仅用于阻止表单默认提交行为，输入场景无需调用

function Search() {
    const history = useHistory();
    const [startDate, setStartDate] = useState(new Date());
    const [endDate, setEndDate] = useState(new Date());
    // 设置宾客数初始值，与输入框默认规则保持一致
    const [numberOfGuests, setNumberOfGuests] = useState(2);
  
    const selectionRange = {
      startDate: startDate,
      endDate: endDate,
      key: "selection"
    };

    // 修正输入变更的处理逻辑
    const handleGuestInputChange = event => {
      // 从事件对象中取输入值，转为数字后存入状态
      const inputValue = Number(event.target.value);
      setNumberOfGuests(inputValue);
    }
  
    function handleSelect(ranges) {
      setStartDate(ranges.selection.startDate);
      setEndDate(ranges.selection.endDate);
    }

    const onSearch = useCallback(() => {
      console.log("startDate: ", startDate);
      console.log("endDate: ", endDate);
      console.log("numberOfGuests", numberOfGuests);
    
      axios
        .post(`/availableapartments`, {
          startDate,
          endDate,
          numberOfGuests
        })
        .then((res) => {
          console.log(res);
          console.log(res.data);
          history.push('/availableapartments')
        }); 

    }, [startDate, endDate, numberOfGuests]);
  
    return (
      <div className="datepickersearch">
        <DateRangePicker ranges={[selectionRange]} onChange={handleSelect} />
  
        <h2> Number of guests</h2>
        {/* 移除无效自定义属性，绑定正确的受控逻辑 */}
        <input 
          min={0} 
          max={7} 
          value={numberOfGuests}
          type="number" 
          onChange={handleGuestInputChange} 
        />
        <Button onClick={onSearch}>Search Apartments</Button>
      </div>
    );
}
  
export default Search;

内容的提问来源于stack exchange，提问作者lara-div