时间戳

首页 > 解决方案 > 我需要在 POST 请求后调用页面渲染

javascript - 我需要在 POST 请求后调用页面渲染

问题描述

我向服务器提交请求，然后想在不重新加载页面的情况下获得结果（SPA 原理），如何使用 useEffect() 来完成？

I tried to do something like this:
useEffect (() => {
addProduct ();
})

但这是个坏主意

import React,  {useState, useEffect} from 'react';
import api from './api';

const HandleProduct = () => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const updateName = (e) =>{
    setName(e.target.value);
  }
  const updateDescription = (e) =>{
    setDescription(e.target.value);
  }
  const addProduct = () =>{
    const product = {
      name: name,
      description: description
    }
    api.addProduct(product)
    .then((req, res) =>{
      console.log(res);
    })
  }
return (
    <div>
        <form onSubmit={addProduct}>
            <input type="text" name="name" value={name} onChange={updateName}/>
            <input type="text" name="description" value={description} onChange={updateDescription}/>
            <button>Submit</button>
        </form>
    </div>
  );
}
export default HandleProduct;

标签： javascriptnode.jsreactjs

解决方案

您的代码似乎是合法的，但是，鉴于它不起作用，我会给您另一种选择来做到这一点。

在 App.js 中

<Router >
            <ProductsProvider>
              <Route exact path="/products" component={ProductsList} props={...props} />
              <Route exact path={'/products/add'} component={HandleProduct} 
props={...props} />
            </ProductsProvider>
          </Router>

在 HandleProduct.js 中

import React,  {useState} from 'react';
import api from './api';
import { Redirect } from 'react-router'

const HandleProduct = ({history}) => {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const updateName = (e) =>{
    setName(e.target.value);
  }
  const updateDescription = (e) =>{
    setDescription(e.target.value);
  }
  const addProduct = (e) =>{
    e.preventDefault();
    const product = {
      name: name,
      description: description
    }
    api.addProduct(product)
    .then((req, res) =>{
      history.push('/products');
    })
  }

return (
    <div>
        <form onSubmit={addProduct}>
            <input type="text" name="name" value={name} onChange={updateName}/>
            <input type="text" name="description" value={description} onChange={updateDescription}/>
            <button>Submit</button>
        </form>
    </div>
  );
}

推荐阅读