我应该如何使用带有 post axios 的 react hook useState答案

【问题标题】：how i should use react hook useState with post axios我应该如何使用带有 post axios 的 react hook useState
【发布时间】：2021-12-08 14:21:13
【问题描述】：

我尝试使用挂钩调用请求帖子。首先，使用 this.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) => {
    this.setState({
      [event.target.name]: event.target.value,
    });
  };

  submitShoes = (event) => {
    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) => {
      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) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const submitShoes = (event) => {
    event.preventDefault();

    axios.post("http://localhost:8080/api", values)
    .then((response) => {
      if (response.data != null) {
        setValues(response.data);
        alert("added!");
      }
    });
  };

我应该改变什么？

【问题讨论】：

什么“不起作用”？它失败的具体程度如何？你做了什么调试？

标签： reactjs post axios react-hooks

【解决方案1】：

要在 React Hooks 中仅更改状态对象的一个属性，您必须这样做：

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

【讨论】：

【解决方案2】：

在第一个有效的示例中，您通过调用 this.setState(this.startValue) 来重置状态

在第二个示例中，您在 setValue setValues(response.data) 中传递网络请求的结果

在AddShoes 函数组件之外创建initialValues。

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

现在将其传递给 setValues 内的 submitShoes

  const submitShoes = (event) => {
    event.preventDefault();

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

【讨论】：