Javascript 我需要在POST请求后调用页面呈现

我向服务器提交请求，然后希望在不重新加载页面的情况下获得结果（SPA原则），如何使用useEffect（）实现这一点

但这是个坏主意

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;

import React，{useState，useffect}来自“React”；
从“/api”导入api；
常量HandleProduct=（）=>{
const[name，setName]=useState（“”）；
const[description，setDescription]=useState（“”）；
常量updateName=（e）=>{
设置名称（如目标值）；
}
const updateDescription=（e）=>{
setDescription（如目标值）；
}
const addProduct=（）=>{
常数乘积={
姓名:姓名,，
描述：描述
}
api.addProduct（产品）
.然后（（请求、回复）=>{
控制台日志（res）；
})
}
返回(
提交
);
}
导出默认HandleProduct；

当调用带有响应的回调时，您就得到了包含从API发送的所有数据的repsonse。假设您想要获取ID。我将添加新的钩子来存储ID，在POST方法完成后设置它，并显示它

  const [productId, setProductId] = useState(null);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const updateName = (e) =>{
    setName(e.target.value);
  }
  const updateDescription = (e) =>{
    setDescription(e.target.value);
  }

    onSubmit() {
        const product = {
          name: name,
          description: description
        }
        api.addProduct(product)
        .then((req, res) =>{
          setProudctId(JSON.parse(res).id);
        })
      }


return (
    <div>

        {productId && <span>Your productId: {productId} </span>} 

        <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;

const[productId，setProductId]=useState（null）；
const[name，setName]=useState（“”）；
const[description，setDescription]=useState（“”）；
常量updateName=（e）=>{
设置名称（如目标值）；
}
const updateDescription=（e）=>{
setDescription（如目标值）；
}
onSubmit（）{
常数乘积={
姓名:姓名,，
描述：描述
}
api.addProduct（产品）
.然后（（请求、回复）=>{
setProudctId（JSON.parse（res.id））；
})
}
返回(
{productId&&您的productId:{productId}
提交
);
}
导出默认HandleProduct；

当调用带有响应的回调时，您就得到了包含从API发送的所有数据的repsonse。假设您想要获取ID。我将添加新的钩子来存储ID，在POST方法完成后设置它，并显示它

  const [productId, setProductId] = useState(null);
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  const updateName = (e) =>{
    setName(e.target.value);
  }
  const updateDescription = (e) =>{
    setDescription(e.target.value);
  }

    onSubmit() {
        const product = {
          name: name,
          description: description
        }
        api.addProduct(product)
        .then((req, res) =>{
          setProudctId(JSON.parse(res).id);
        })
      }


return (
    <div>

        {productId && <span>Your productId: {productId} </span>} 

        <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;

const[productId，setProductId]=useState（null）；
const[name，setName]=useState（“”）；
const[description，setDescription]=useState（“”）；
常量updateName=（e）=>{
设置名称（如目标值）；
}
const updateDescription=（e）=>{
setDescription（如目标值）；
}
onSubmit（）{
常数乘积={
姓名:姓名,，
描述：描述
}
api.addProduct（产品）
.然后（（请求、回复）=>{
setProudctId（JSON.parse（res.id））；
})
}
返回(
{productId&&您的productId:{productId}
提交
);
}
导出默认HandleProduct；

您的代码似乎是合法的，但是，考虑到它不起作用，我会给您另一个选择

在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>
  );
}

import React，{useState}来自“React”；
从“/api”导入api；
从“react router”导入{Redirect}
const HandleProduct=（{history}）=>{
const[name，setName]=useState（“”）；
const[description，setDescription]=useState（“”）；
常量updateName=（e）=>{
设置名称（如目标值）；
}
const updateDescription=（e）=>{
setDescription（如目标值）；
}
const addProduct=（e）=>{
e、 预防默认值（）；
常数乘积={
姓名:姓名,，
描述：描述
}
api.addProduct（产品）
.然后（（请求、回复）=>{
推送（“/产品”）；
})
}
返回(
提交
);
}

您的代码似乎是合法的，但是，考虑到它不起作用，我会给您另一个选择

在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>
  );
}

import React，{useState}来自“React”；
从“/api”导入api；
从“react router”导入{Redirect}
const HandleProduct=（{history}）=>{
const[name，setName]=useState（“”）；
const[description，setDescription]=useState（“”）；
常量updateName=（e）=>{
设置名称（如目标值）；
}
const updateDescription=（e）=>{
setDescription（如目标值）；
}
const addProduct=（e）=>{
e、 预防默认值（）；
常数乘积={
姓名:姓名,，
描述：描述
}
api.addProduct（产品）
.然后（（请求、回复）=>{
推送（“/产品”）；
})
}
返回(
提交
);
}

导入React，{useContext}来自“React”；
从“/ProductsContext”导入{ProductsContext}；
常量产品列表=（）=>{
const[data]=useContext（ProductsContext）；
返回(
{console.log（数据）}
{data.products.map（（产品，索引）=>(
{product.name}

{product.description}

))}
);
}
导出默认产品列表；

导入React，{useContext}来自“React”；
从“/ProductsContext”导入{ProductsContext}；
常量产品列表=（）=>{
const[data]=useContext（ProductsContext）；
返回(
{console.log（数据）}
{data.products.map（（产品，索引）=>(
{product.name}

{product.description}

))}
);
}
导出默认产品列表；

在post请求之后，您将从该请求中获得新信息。这些数据将是什么？产品？你在哪里展示产品？输入值的“名称”来自何处？数据是产品列表，名称来自express Server抱歉，但还有一块拼图仍然不合适，您将在何处显示该产品列表？请注意新代码，也许这会让你有机会了解我想要什么