Get方法被无限调用答案

【问题标题】：Get method is being called infinitelyGet方法被无限调用
【发布时间】：2021-04-09 05:46:32
【问题描述】：

我正在获取数据以将其填充到表单上，但是当我尝试编辑输入中的数据时，输入值将返回其原始值，这是因为 get 方法在组件上无限呈现.我真的需要你的眼睛看到错过或错过的东西。先谢谢大家了。

获取方法

import * as api from '../api/profile';

export const getProfile = () => async (dispatch) => {
    try {
        const { data } = await api.fetchProfile();
        
        dispatch({ type: 'FETCH_ALL', payload: data });
    } catch (error) {
        console.log(error.message);
    }
}

配置文件容器

import React, { useState, useEffect }  from 'react';

import { useDispatch, useSelector } from 'react-redux';
import { getProfile } from '../../../actions/profile'; //fetch method
import Profile from './Profile';

function Index() {
    const dispatch = useDispatch();
    const posts = useSelector((state) => state.posts);
    const currentId = useState(null);

    useEffect(() => {
        dispatch(getProfile()); 
    }, [currentId, dispatch]);

  return (
        <div className="custom-container">
        {posts.map((profile) => (
            <div key={profile._id}>
                <Profile profile={profile} currentId={currentId} />
            </div>
        
        ))}
        </div>
    );
}

export default Index;

个人资料表单组件

import './Profile.css';
import { React, useState, useEffect }  from 'react';
import Button from 'react-bootstrap/Button';
import { TextField  } from '@material-ui/core';
import { useDispatch, useSelector } from 'react-redux';
import { updateProfile } from '../../../actions/profile';

 const Profile = ({ profile, currentId }) => {
    const dispatch = useDispatch();
    currentId = profile._id;
    const [postData, setPostData] = useState(
        {
            profile: {
                name: "",
                description: "",
                email: "",
                number: "",
            }
                
        }
    );

    const post = useSelector((state) => currentId ? state.posts.find((p) => p._id === currentId) : null);
    
    useEffect(() => {
        if(post) setPostData(post);
    }, [post])

    const handleSubmit = (e) => {
        e.preventDefault();

        if(currentId) {
            dispatch(updateProfile(currentId, postData));
        }
    }
  
    return (
        <form autoComplete="off" noValidate className="form" onSubmit={handleSubmit}>
            
            <TextField
            id="name"
            name="name"
            className="name"
            label="Full Name"
            variant="outlined"
            value={postData.profile.name}
            onChange={(e) => setPostData({...postData, profile: {...postData.profile, name: e.target.value}})}
            />

            <TextField
            id="outlined-multiline-static"
            label="Multiline"
            multiline
            rows={4}
            variant="outlined"
            size="small"
            className="mb-3"
            name="description"
            value={postData.profile.description}
            onChange={(e) => setPostData({...postData, profile: {...postData.profile, description: e.target.value}})}
            fullWidth
            />

            <TextField
            id="email"
            label="Email"
            variant="outlined"
            size="small"
            className="mb-3"
            name="email"
            value={postData.profile.email} 
            onChange={(e) => setPostData({...postData, profile: {...postData.profile, email: e.target.value}})}
            />
            <TextField
            id="phone"
            label="Phone Number"
            variant="outlined"
            size="small"
            name="phone"
            value={postData.profile.number}
            onChange={(e) => setPostData({...postData, profile: {...postData.profile, number: e.target.value}})}
            />
            <Button variant="light" type="submit" className="Save">Save</Button>
        </form>
    );
}

export default Profile;

【问题讨论】：

您能否发布您的 getProfile 操作？
useState的正确使用方式应该是const [currentId, setCurrentId] = useState(null);
@jossefaz 我添加了。请检查。
@bcjohn 让我试试
正如@bcjohn 指出的那样：您传递了currentId，它是一个数组，因为它是一个值类型......这不起作用。不确定这是您问题的根源，但我也会检查一下

标签： reactjs axios

【解决方案1】：

在 useEffect 中你已经像这样在 Profile Container 中通过了


    useEffect(() => {
        dispatch(getProfile()); 
    }, [currentId, dispatch]);

在params中你也传递了dispatch，所以每次dispatch运行它都会调用dispatch，所以它被称为无限次，去掉它

【讨论】：

【解决方案2】：

可能是因为useEffect。

useEffect(() => {
    if(post) setPostData(post);
}, [post])

帖子每次都是不同的对象。检查 useEffect 依赖项中的 post 属性，例如：

useEffect(() => {
    if(post) setPostData(post);
}, [post.profile.description])

另外，为什么要在 Profile 组件中更改下面的 prop 值？

currentId = profile._id

【讨论】：