Question

在Stackover Flow中对我有新的反应和第一个问题

我有一个我不明白的问题，我试图以一种形式显示默认值以更新成员。我知道，我必须在输入中使用defaultValue并指出从数据库中获取的值。我已经完成了更新其他信息的操作，但是对于我的成员（以及另一个收藏集），它不起作用。

我的useEffect出现第一个问题，错误：警告：无法在已卸载的组件上执行React状态更新。这是空操作，但它表明应用程序中发生内存泄漏。要修复，请取消使用useEffect清理功能中的所有订阅和异步任务。似乎可以使用以下方法解决：https://codesandbox.io/s/l458746w89?from-embed=&file=/src/AxiosHooksComponent.js

但是没有显示defaultValues。最糟糕的是，当我将{data.nom}的格式（在Nom旁边）放入时，什么都没有。

我试图延迟渲染，但我收到一条消息，指出正在加载，然后出现表单，但没有我想要的数据。我从后端console.log记录了数据，我得到了，但是没有返回。

我在哪里错了？这是我的代码。如果您需要更多信息，请随时询问

import React, { useState, useEffect } from 'react';
import { useParams, useHistory, Link } from 'react-router-dom';

import ErrorNotice from '../misc/ErrorNotice';
import Requete from '../../middlewares/Requete';
import axios from 'axios';

export default function UpdateMembre(){

const [nom, setNom]= useState();
const [prenom, setPrenom]= useState();
const [email, setEmail]= useState();
const [mot_de_passe, setMotDePasse]= useState();
const [mot_de_passe_confirmation, setMotDePasseConfirmation]= useState();
const [telephone, setTelephone]= useState();
// const [commune_entreprise, setCommuneEntreprise] = useState();
const [error, setError] = useState();
const [data, setData] = useState([]);

const history = useHistory();
const { id } = useParams();

let token = localStorage.getItem("auth-token");
if(token === null){
    localStorage.setItem('auth-token', "");
    token = "";
}

// useEffect(function(){

//     async function fetchData(){
//         const result = await Requete.get(
//             '/membres/afficher/' + id,
//             { headers: { "x-auth-token": token } },
//         );
//         setData(result);
//     };
//     fetchData();
// });

useEffect(() => {

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();

    const fetchData = () => {
        try{
            Requete.get(
                '/membres/afficher/' + id,
                { headers: { "x-auth-token": token }, cancelToken: source.token},
            ).then(data => {setData(data.data)});
        } catch(error){
            if(axios.isCancel(error)) {
                console.log("Cancelled");
            } else {
                throw error;
            }
        }
    };
    fetchData();
    return () => {
        source.cancel();
    };
}, [id, token])

const submit = async function(e){
    e.preventDefault();

    try{
        const majMembre = { nom, prenom, email, mot_de_passe, mot_de_passe_confirmation, telephone };
        await Requete.put(
            "/membres/maj/" + id,
            majMembre,
            { headers: { "x-auth-token": token } },
        );
        history.push("/membre/" + id);
    } catch(err){
        err.response.data.msg && setError(err.response.data.msg); //Les 2 doivent être vrai pour être executés. Si le premier est vrai, le setState s'executera pour stocker le message d'erreur
    }
}

return(
    console.log("data: ", data),
    <div>
        {data.length === 0 ? (
            <p>Chargement des données</p>
        ) : (
        <div className="col-md-12">
            <div className="card card-container">
                <img
                    src="//ssl.gstatic.com/accounts/ui/avatar_2x.png"
                    alt="profile-img"
                    className="profile-img-card"
                />
                {error && (
                    <ErrorNotice message={error} clearError={()=> setError(undefined)} />
                )} {/*S'il y a une erreur, affiche le message d'erreur, la faction anonyme supprime quand on clique */}
                <form onSubmit={submit}>
                    <div className="form-group">
                    <label>Nom: {data.nom}</label>
                        <input
                            defaultValue={data.nom}
                            type='text'
                            className='form-control'
                            placeholder='Votre nom'
                            onChange={(e) => setNom(e.target.value)}
                        />
                    </div>
                    <div className="form-group">
                        <label>Prénom:</label>
                        <input
                            defaultValue={data.prenom}
                            type='text'
                            className='form-control'
                            placeholder='Votre prénom'
                            onChange={(e) => setPrenom(e.target.value)}
                        />
                    </div>
                    <div className="form-group">
                        <label>Email:</label>
                        <input
                            defaultValue={data.email}
                            type='text'
                            className='form-control'
                            placeholder='Votre email'
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    <div className='form-group'>
                        <label>Mot de passe:</label>
                        <input
                            type='password'
                            className='form-control'
                            placeholder='Mot de passe'
                            onChange={(e) => setMotDePasse(e.target.value)}
                        />
                    </div>
                    <div className='form-group'>
                        {/* <label>Confirmation de votre mot de passe:</label> */}
                        <input
                            type='password'
                            className='form-control'
                            placeholder='Confirmez votre mot de passe'
                            onChange={(e) => setMotDePasseConfirmation(e.target.value)}
                        />
                    </div>
                    <div className='form-group'>
                        <label>Téléphone:</label>
                        <input
                            defaultValue={data.telephone}
                            className='form-control'
                            type='tel'
                            pattern='[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}[0-9]{2}'
                            placeholder='06 xx xx xx xx'
                            onChange={(e) => setTelephone(e.target.value)}
                        />
                    </div>
                    {/* <div className='form-group'>
                        <label>Dans quelle commune travaillez-vous ?</label>
                        <select 
                            className='form-control'
                            // value={this.state.commune}
                            onChange={(e) => setCommuneEntreprise(e.target.value)}               
                        >
                            <option>Aucune</option>
                            {optionItems}
                        </select>
                    </div> */}
                    <div className='form-group'>
                        <input type='submit' value='Inscription' className='btn btn-primary'/>
                        <p><Link to={"/membre/" + id}>Retour</Link></p>
                    </div>
                </form>
            </div>
        </div>
        )}
    </div>
)

}

Answer 1

我找到了解决问题的方法，我不知道为什么，但是使用相同的请求格式，我的其他功能更新中后端的响应就不同了。

我不得不放{data [0] .nom}来显示我的值

带钩子的React中的默认值和延迟渲染值问题

1 个答案: