小编Emi*_*lis的帖子

我正在尝试制作简单的表单来将文件和其他一些数据传递到我的服务器。稍后我将尝试添加数据库查询，但现在我没有看到任何数据传输到那里，所以我被卡住了。

我使用 react 创建了前端：

const [mainPicture, setMainPicture] = useState(null);
const [pictures, setPictures] = useState([]);
const [name, setName] = useState('Name');
const config = {
    headers: {
        'content-type': 'multipart/form-data'
    }
};

function handleSubmit(e) {
    e.preventDefault();

    const formData = new FormData();
    formData.append('name', name);
    formData.append('mainPicture', mainPicture);

    console.log(formData);

    axios
        .post(
            prefix + '/api/add_project',
            formData, {
            headers: config.headers,
            onUploadProgress: progressEvent => {
                console.log('Upload Progress: ' + Math.round(progressEvent.loaded / progressEvent.total * 100) + '%');
            }
        })
        .then((response) => {
            alert(response);
        })
        .catch((error) => {
            console.log(error);
        });
} …

所以这是我减速路线的第一个组件。我决定制作两个导航项目。并做了一些造型。但我在许多重新渲染时都遇到错误。因为我尝试添加具有悬停效果的样式。我不想使用CSS。这是我的代码：

import React, { useState } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Products from './Screens/ProductsList';
import Preview from './Screens/Product';
import ProductCreate from './Screens/ProductCreate';
import ProductEdit from './Screens/ProductEdit';
import Home from './Screens/Home';

function App() {
  const [hover, setHover] = useState(false);
  return (
    <BrowserRouter>
      <div style={style.navigationContainer}>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products"
        >
          Products List
        </Link>
        <Link
          onMouseEnter={setHover(true)}
          onMouseLeave={setHover(false)}
          style={hover ? style.hoverNavItem : style.navItem}
          to="/products/create"
        >
          Create …