React+Rails API应用表单输入触发无限循环问题求助

问题描述 #

我开发了一个以Rails作为API后端的React应用，在使用AddCreation组件渲染的新增信息表单中输入内容时，页面会陷入无限循环。修改路由配置后，循环问题消失，但表单无法调用后端API（已通过console.log确认表单值已正常传递）。

原AddCreation组件代码 #

import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';
import { useNavigate } from 'react-router-dom';
import { getToken } from '../redux/actions/auth';
import axios from 'axios';

const AddCreation = () => {
  const { reset } = useForm();
  const navigate = useNavigate();
  const [creation, setCreation] = useState({});
  const { currentUser } = useSelector((state) => state.auth);

  if (currentUser.role !== 'admin') {
    navigate('/');
  }

  const handleChange = (e) => {
    e.preventDefault(); 
    setCreation({ ...creation, [e.target.name]: e.target.value });
    console.log(creation)
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const data = new FormData();
    const img = document.getElementById('art_image');

    data.append('image_url', img.files[0]);
    // data.append('journeyman_id', parseInt(id, 10));
    data.append('artist', creation.artist);
    data.append('title', creation.title);
    data.append('type_of_work', creation.type_of_work);
    data.append('medium', creation.medium);
    data.append('dimensions', creation.dimensions);
    data.append('date_of_composition', creation.date_of_composition);
    data.append('art_category', creation.art_category);
    data.append('comment', creation.comment);
    data.append('price', creation.price);
    
    axios.post('http://localhost:3001/v1/creations', data, {
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization: getToken(),
      },
    })
      .then((response) => {
        console.log(response);
        navigate('/');
      })
      .catch((error) => {
        console.log(error);
      });
    reset();
  };

  return (
    <main className="">
      <div className="my-5 d-flex flex-column align-items-center">
        <h2>Add a Creation to Listing</h2>
        <form className="my-5 d-flex flex-row justify-content-center border border-dark" onSubmit={handleSubmit}>
          <div className="my-5 mx-5">
            
            <div className="d-flex flex-row justify-content-between my-3">
              <label
                className=""
                htmlFor="artist-name"
              >
                Artist Name:
              </label>
              <input
                className=""
                id="artist"
                type="text"
                name="artist"
                onChange={handleChange}
                required
              />
            </div>
            
            <!-- 其他输入项省略 -->

            <div className="my-3">
              <button className="btn btn-primary btn-lg" type="submit" >
                Add Creation
              </button>
            </div>
          </div>
        </form>
      </div>
    </main>
  );
};

export default AddCreation;

输入内容时的错误提示 #

react_devtools_backend.js:2655 Warning: Cannot update a component (`BrowserRouter`) while rendering a different component (`AddCreation`). To locate the bad setState() call inside `AddCreation`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

原App.js路由配置 #

import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ProtectedRoutes from './components/ProtectedRoutes';
import useAuth from './hooks/useAuth';
import Signup from './components/Signup';
import Login from './components/Login';
import Creations from './components/Creations';
import AddCreation from './components/AddCreation';

function App() {
  const { authChecked, loggedIn } = useAuth();

  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login loggedIn={loggedIn} />} />
        <Route path="/signup" element={<Signup />} />
        <Route element={<ProtectedRoutes isAllowed={loggedIn} authChecked={authChecked} redirectPath="/login" />}>
          <Route path="/creations" element={<Creations />} />
          <Route path="/" element={<AddCreation />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

修改后的路由配置（循环问题消失，但API调用失败） #

<Route element={<ProtectedRoutes isAllowed={loggedIn} authChecked={authChecked} redirectPath="/login" />}>
  <Route path="/creations" element={<Creations />} />
  <Route path="/add-creation" element={<AddCreation />} />
</Route>

内容的提问来源于stack exchange，提问作者German