使用 useEffect 使用 React 获取数据

Question

我想要做的是当用户单击编辑按钮时，这会将他发送到一个新页面，他可以在其中修改他已经输入的信息。我面临的问题是新页面没有显示以前输入的数据，以便用户可以进行更改。此外，发送这些更改的提交按钮也不起作用。这些是我得到的错误： src\components\RestaurantList.jsx 第 25:8 行：React Hook useEffect 缺少依赖项：'setRestaurants'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps 第 31:19 行：'response' 被赋值但从未使用 no-unused-vars

src\components\UpdateRestaurant.jsx 第 9:12 行：“restaurants”被赋值，但从未使用 no-unused-vars 第 38:8 行：React Hook useEffect 缺少依赖项：'code'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

我正在处理的组件的代码：

import React, {useState, useContext, useEffect} from 'react';
import { useHistory, useParams } from 'react-router-dom';
import RestaurantFinder from '../apis/RestaurantFinder';
import { RestaurantsContext } from '../context/RestaurantsContext';

const UpdateRestaurant = (props) => {

    const {code} = useParams();
    const {restaurants} = useContext(RestaurantsContext);
    let history = useHistory();

    const [name, setName] = useState("");
    const [value, setValue] = useState ("");
    const [strain, setStrain] = useState ("");
    const [weight, setWeight] = useState ("");
    const [authors, setAuthors] = useState ("");
    const [number, setNumber] = useState ("");
    const [page, setPage] = useState ("");
    const [date, setDate] = useState ("");

    useEffect(() => {
        const fetchData = async () => {
            const response = await RestaurantFinder.get(`/${code}`);
            console.log(response.data.data);
            setName(response.data.data.restaurant.name);
            setValue(response.data.data.restaurant.value);
            setStrain(response.data.data.restaurant.strain);
            setWeight(response.data.data.restaurant.weight);
            setAuthors(response.data.data.restaurant.authors);
            setNumber(response.data.data.restaurant.number);
            setPage(response.data.data.restaurant.page);
            setDate(response.data.data.restaurant.date);
            
           
        };

        fetchData();
    }, []);


    const handleSubmit = async(e) => {
        e.preventDefault();
        
        const updatedRestaurant = await RestaurantFinder.put(`/${code}`, {
            name,
            value,
            strain,
            weight,
            authors,
            number,
            page,
            date,  
            
        });
        console.log(updatedRestaurant);
        history.push("/");
        
    };


    return (
        <div>
            
            <form action="">

                <div className="form-group">
                    <label htmlFor="name">Name</label>
                    <input value={name} onChange={(e) => setName(e.target.value)} code="name" className="form-control" type="text" />
                </div>

                <div className="form-group">
                    <label htmlFor="Value">Value</label>
                    <input value={value} onChange={(e) => setValue(e.target.value)} code="value" className="form-control" type="float" />
                </div>

                <div className="form-group">
                    <label htmlFor="Strain">Strain</label>
                    <input value={strain} onChange={(e) => setStrain(e.target.value)} code="strain" className="form-control" type="text" />
                </div>

                <div className="form-group">
                    <label htmlFor="Weight">Weight</label>
                    <input value={weight} onChange={(e) => setWeight(e.target.value)} code="weight" className="form-control" type="float" />
                </div>

                <div className="form-group">
                    <label htmlFor="Author">Author</label>
                    <input value={authors} onChange={(e) => setAuthors(e.target.value)} code="authors" className="form-control" type="text" />
                </div>

                <div className="form-group">
                    <label htmlFor="Number">Number</label>
                    <input value={number} onChange={(e) => setNumber(e.target.value)} code="number" className="form-control" type="number" />
                </div>

                <div className="form-group">
                    <label htmlFor="Page">Page</label>
                    <input value={page} onChange={(e) => setPage(e.target.value)} code="page" className="form-control" type="number" />
                </div>

                <div className="form-group">
                    <label htmlFor="date">Date</label>
                    <input value={date} onChange={(e) => setDate(e.target.value)} code="date" className="form-control" type="number" />
                </div>

                <button onClick={handleSubmit} type="submit" className="btn btn-primary">Submit</button>

            </form> 
        </div>
    )
}

export default UpdateRestaurant

Answer 1

对于可重用的代码，最好只做这样的事情。

这可能不是答案，但我希望它能帮助你找到答案。

        const [data, setData ] = useState({restraunt.loaded:"false"});
    
             useEffect(() => {
    
  const fetch = async () => {
                        const response = await RestaurantFinder.get(`/${code}`);
                        console.log(response.data.data);
               setData({...response.data.data, restraunt.loaded:"true"});               
                    };
fetch();
            },[Data.restraunt.loaded])
        


           const {name, value , page, loaded } = Data.restaurant;

return (
        <div><h1>{loaded}</h1>
            </div>
)

如果它显示加载为假，那么你知道这是因为数据没有加载。