POST 表单 React 使用 useEffect 表达 API

Question

我真的没有经验。我正在尝试使用useEffect从反应组件单击提交到我的快速api时发布表单。这是我所做的：

这是我的反应组件

export function AdminFields () {

    const[vehiclesList, addVehicles] = useState([{}])

    useEffect(() => {
        const addVehicles = {
            method: 'POST',
            body: JSON.stringify({ title: 'New car' })
        };
        fetch('"http://localhost:5000/cars"', addVehicles)
            .then(response => response.json())
            .then(data => addVehicles(data));
    


    }
  
    )
    async function vehiclesList(){
        const { data } = await Axios.post(
            'http://localhost:5000/cars',
            vehiclesList
          )
          addVehicles(data)
    }
    const handleSubmit = e => {
        fetchData()
      }



    return(
            <div classname="Fields" method='POST' onSubmit={handleSubmit}>
            <h2>Ajout d'un véhicule</h2>
            <br />
            <div classname="input">
                <input type="text" placeholder="Nom du propriétaire" />
            </div>
            <br />
            <div classname="input">
                <input type="text" placeholder="N° immatriculation" />
            </div>
            <br />
            <div classname="input">
                <input type="text" placeholder="Marque" />
            </div>
            <br />
            <div classname="input">
                <input type="text" placeholder="Couleur" />
            </div>
            <br /> 
            <ValidateAdminButton type='submit'>Valider</ValidateAdminButton>
             
        </div>
);
}

I tried to add small pieces of code I could understand from other post. 

我的 express api 在 5000 端口上运行，请帮助我

Answer 1

您在这里编写的有趣代码。您的变量命名似乎有些小问题。

您使用相同的标识符addVehicles 表示两个完全不同的事物。首先，您的状态变更器称为addVehicles，但随后在您的useEffect 函数的上下文中，您也可以通过将其称为addVehicles 来覆盖您的状态变更器。

在您的 useEffect 上下文中，您的 addVehicles 标识符指向您的请求选项，而不是您所期望的状态转换函数。

我建议重命名保存您的 http 请求选项的变量。您可能还会发现将修改状态变量 vehiclesList 的状态变换器命名为 setVehiclesList 很有用——这往往是惯例。一般来说，您可能拥有const [var, setVar] = useState(initialValue)，其中var 可以替换为您想要拥有的任何状态。

希望这能解决您的问题！