键入时，我的输入字段中的值未正确更改状态？反应钩子 PUT

问题描述

在我尝试更新房屋时的编辑表单中，我注意到它正在识别我正在输入的值，但实际上并未更新正在更改的属性的状态。该请求在后端工作。它也在客户端通过，但实际上并没有改变任何值。

组件

import React,{ useState,useEffect } from "react";

// import axios from "axios";

import axios,{get,put}  from 'axios'

import { Link,withRouter } from 'react-router-dom'

const EditHouseForm = (props) => {

    // const initialState = { 
   
    //     price: 0,//      city: '',//      county: '',//      numOfbeds: 0,//      numOfBaths: 0,//      numOfGarages: 0,//      isSaleOrRent: '',//      us_state: '',//      sqaurefeet: 0,//      house_image: 0,//    }

    //    const [house,setHouse] = useState(initialState)
  const [house,setHouse] = useState({ 
   id: '',price: 0,city: '',county: '',numOfbeds: 0,numOfBaths: 0,numOfGarages: 0,isSaleOrRent: '',us_state: '',sqaurefeet: 0,house_image: 0,});

const [houseShow,setShowLoading] = useState(true);

  const url = `http://localhost:5000/api/house-details/edit/${props.match.params.id}`;

  useEffect(function() { 
      setShowLoading(false);
      const fetchData = async () =>{
            const result = await axios(`/api/house-details/${props.match.params.id}`);
            setHouse(result.data);
            console.log(result.data)
            setShowLoading(false)
      };
      fetchData()
  },[])
  
//   useEffect(function() {
//     async function getHouse() {
//       try {
//         const response = await axios.get(url);
//         setHouse(response.data);        
//       } catch(error) {
//         console.log(error);
//       }
//     }
//     getHouse();    
//   },[props,url]);




  const updateHouse = (e) =>{
      setShowLoading(true);
      e.preventDefault();
      const data ={ 
        price: house.price,city: house.city,county: house.county,numOfbeds: house.numOfbeds,numOfBaths: house.numOfBaths,numOfGarages: house.numOfGarages,isSaleOrRent: house.isSaleOrRent,us_state: house.us_state,sqaurefeet: house.sqaurefeet,house_image: house.house_image
      };
      put(`/api/house-details/edit/${props.match.params.id}`,data).then(()=>{
          setShowLoading(false)
          props.history.push(`/house-details/${props.match.params.id}`)
      }).catch((error)=>{
          setShowLoading(false)
        console.log(error)
      })
  }

  const onChange = (e) =>{
      e.persist();
      setHouse({...house,[ e.target.name]: e.target.value})
  }

  return (
    <div>
      <h1>hello world</h1>
      <form className="form" onSubmit={updateHouse}>
      <label> House Price</label>
                <input type="number" placeholder="House Price" 
                onChange={onChange} defaultValue={house.price  || undefined }
                />
                <label >County</label>
              <input type="text" placeholder="County" 
              onChange={onChange}  defaultValue={house.county || ''}/>
               
                <label >House Location(City)</label>
                <input type="text" placeholder="City" 
                onChange={onChange} defaultValue={house.city || ''}
                />
                <label>House Location(State)</label>
                <input type="text" placeholder="State"
                onChange={onChange} defaultValue={house.us_state || '' }
                />
                <label>Sale or Rent</label>
                <select onChange={onChange} defaultValue={house.isSaleOrRent || '' }>
                    <option>...</option>
                    <option value={`SALE`}>Sale</option>
                    <option value={`RENT`}>Rent</option>
                </select>
                <label >Sqft</label>
               <input type="number" placeholder="sqft"
               onChange={onChange} defaultValue={house.squarefeet || undefined }
               />
                <label > Number of bedrooms</label>
                <input type="number" placeholder="Number of bedrooms" 
                onChange={onChange} defaultValue={house.numOfbeds || undefined  }
                />
                <label> Number of bathrooms</label>
                <input type="number" placeholder="Number of bathrooms" 
                onChange={onChange} defaultValue={house.numOfBaths || undefined }
                />

            
                <label > Number of garages</label>
                <input type="number" placeholder="Number of garages" 
                onChange={onChange} defaultValue={house.numOfGarages || undefined}
                />
                 <label>House image</label>
                <input type="file" placeholder="house image" 
                onChange={onChange} 
                />

              <button className="button" type="submit">Update</button>
      </form>
       
    </div>
  );
};

export default withRouter(EditHouseForm);

解决方法

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

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

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