Reactjs React with Hook中的默认和延迟渲染值存在问题

在Stackover Flow中新增react和我的第一个问题

我有一个不明白的问题，我正在尝试在表单中显示默认值以更新成员。 我知道，我必须在输入中使用defaultValue，并指出我从数据库中获得的值。我这样做是为了更新其他信息，但对于我的成员（以及其他收藏）来说，它不起作用

我的useEffect出现了第一个问题：警告：无法对未安装的组件执行React状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消useEffect清理函数中的所有订阅和异步任务。 这似乎可以用以下方法解决：

但默认值不会出现。最糟糕的是，当我把{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>
)

import React，{useState，useffect}来自“React”；
从“react router dom”导入{useParams，useHistory，Link}；
从“../misc/ErrorNotice”导入ErrorNotice；
从“../../Middleware/Requete”导入Requete；
从“axios”导入axios；
导出默认函数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_enterprise，setcommunieentreprise]=useState（）；
const[error，setError]=useState（）；
const[data，setData]=useState（[]）；
const history=useHistory（）；
const{id}=useParams（）；
let token=localStorage.getItem（“auth token”）；
如果（令牌===null）{
setItem（'auth-token'，“”）；
令牌=”；
}
//useffect（函数（）{
//异步函数fetchData（）{
//const result=wait Requete.get(
//“/membres/afficher/”+id，
//{头：{“x-auth-token”：token}，
//         );
//设置数据（结果）；
//     };
//fetchData（）；
// });
useffect（（）=>{
const CancelToken=axios.CancelToken；
const source=CancelToken.source（）；
常量fetchData=（）=>{
试一试{
重新获得(
“/membres/afficher/”+id，
{头：{“x-auth-token”：token}，cancelToken:source.token}，
).then（data=>{setData（data.data）}）；
}捕获（错误）{
if（axios.isCancel（错误））{
控制台日志（“取消”）；
}否则{
投掷误差；
}
}
};
fetchData（）；
return（）=>{
source.cancel（）；
};
}，[id，令牌]）
const submit=异步函数（e）{
e、 预防默认值（）；
试一试{
const majMembre={nom，prenom，email，mot_de__通行证，mot_de_通行证确认书，电话}；
等待重新报价(
“/membres/maj/”+id，
majMembre，
{头：{“x-auth-token”：token}，
);
history.push（“/membre/”+id）；
}捕捉（错误）{
err.response.data.msg&&setError（err.response.data.msg）；//Les 2 doiventêtre vrai pourêtre executeés.Si le premier est vrai，le setState s'executer pour stocker le message d'erreur
}
}
返回(
console.log（“数据：”，数据），
{data.length==0(
多涅斯费用

) : (
{错误&&(
setError（未定义）}/>
)}{/*S'ily a une erreur，afche le message d'erreur，la party anonyme supprime quand on clique*/}
Nom:{data.Nom}
setNom（e.target.value）}
/>
名称：
setPrenom（e.target.value）}
/>
电邮：
setEmail（e.target.value）}
/>
路况：
setMotDePasse（e.target.value）}
/>
{/*通过确认书：/}
setMotDePasseConfirmation（e.target.value）}
/>
电话：
setTelephone（e.target.value）}
/>
{/* 
你在哪里工作？
setCommuniteentreprise（e.target.value）}
>
奥库恩
{optionItems}
*/}
复述

)}
)

---

}

我找到了问题的解决方案，我不知道为什么，但对于相同的请求格式，我的后端响应与其他功能更新的响应不同

我必须放入{data[0].nom}来显示我的值