Блог

Я пытаюсь отправить запрос на вызов с помощью крючков. Во-первых, запрос на вызов публикуется с использованием этого.setState, и он работает правильно, но я хочу использовать хук (useState) вместо setState, и он не работает

приведенный ниже код работает правильно

 export default class AddShoes extends Component {  constructor(props) {  super(props);  this.state = this.startValue;  this.state.show = false;  this.shoesChange = this.shoesChange.bind(this);  }   startValue = {  brand: "",  model: "",  date: "",  price: "",  img: "",  };   shoesChange = (event) =gt; {  this.setState({  [event.target.name]: event.target.value,  });  };   submitShoes = (event) =gt; {  event.preventDefault();   const shoes = {  brand: this.state.brand,  model: this.state.model,  date: this.state.date,  price: this.state.price,  img: this.state.img,  };   axios.post("http://localhost:8080/api", shoes).then((response) =gt; {  if (response.data != null) {  this.setState(this.startValue);  alert("added")  }   });  };  

второй приведенный ниже код не работает

 export default function AddShoes() {  const [values, setValues] = useState({  brand: "",  model: "",  date: "",  price: "",  img: "",  });  // const [show, setShow] = useState(false);   const handleSetInputs = (e) =gt; {  setValues({ ...values, [e.target.name]: e.target.value });  };   const submitShoes = (event) =gt; {  event.preventDefault();   axios.post("http://localhost:8080/api", values)  .then((response) =gt; {  if (response.data != null) {  setValues(response.data);  alert("added!");  }  });  };  

что я должен изменить?

Чтобы просто изменить одно свойство объекта состояния в крючках React, вам нужно сделать это:

 setValues(prevValues =gt; ({ ...prevValues, [e.target.name]: e.target.value }));  

В первом примере, который работает, вы сбрасываете состояние, вызывая this.setState(this.startValue)

Во втором примере вы передаете результат сетевого запроса внутри setValue setValues(response.data)

Создайте initialValues AddShoes компонент вне функции.

 const initialValues = {  brand: "",  model: "",  date: "",  price: "",  img: "",  }  

Теперь передайте это внутрь setValues submitShoes

 const submitShoes = (event) =gt; {  event.preventDefault();   axios.post("http://localhost:8080/api", values)  .then((response) =gt; {  if (response.data != null) {  setValues(initialValues);  alert("added!");  }  });  };