Блог

Новое с react и первый вопрос для меня в потоке стекирования

У меня проблема, которую я не понимаю, я пытаюсь отобразить значения по умолчанию в форме для обновления участника. Я знаю, я должен использовать defaultValue при вводе и указывать значение, полученное из моей базы данных. Я сделал это для обновления другой информации, но с моим участником (и другой коллекцией тоже) это не работает.

У меня была первая проблема с ошибкой с моим useEffect: Предупреждение: невозможно выполнить обновление состояния реакции для размонтированного компонента. Это ошибка, но она указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в функции очистки useEffect. Кажется, это можно решить с помощью этого: https://codesandbox.io/s/l458746w89?from-embed=amp;file=/src/AxiosHooksComponent.js

Но значения по умолчанию не отображаются. Хуже всего, когда я просто помещаю {data.nom} в форму (рядом с Nom), ничего нет.

Я попытался отложить рендеринг, и у меня появилось сообщение, указывающее, что оно загружается, а затем появляются формы, но без нужных мне данных. Я консоль.зарегистрируйте данные из моего бэкэнда, и я получил их, но не в моем возврате.

Где я ошибаюсь? Вот мой код. Если вам нужна дополнительная информация, не стесняйтесь спрашивать

 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 amp;amp; 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 amp;amp; (
                    <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>
)
  

}

Я нашел решение своей проблемы, не знаю почему, но при том же формате запроса ответ моего серверной части отличался от других моих функциональных обновлений.

Мне пришлось ввести {data[0].nom} для отображения моего значения