Problem z przesłaniem danych z rodzica do dziecka

Dzień dobry,
mam dwa komponenty rodzica i dziecko. Próbuje teraz przesłać dane z rodzica do dziecka za pomocą .props, przy użyciu .state. Niestety ale coś nie wychodzi mi.

Oto mały przykład:

1. Komponent rodzica.

   <dziecko imie={this.state.imie}/>  <-tutaj wartość jest bez cudzy słownia
   

2. Komponent dziecka:

   export default function dziecko(props) {
     const [imie, setimie] =React.useState(props.imie)
     .....
     return (
      <>
      <div>{imie}</div>
      ......
   
    }
   

   Natomiast gdy wprowadzę ręcznie wartość tekstową jak poniżej to wszystko ładnie działa.

   <dziecko imie="Kamila" />
   

W rodzicu wartość this.state.imie ustalana jest za pomocą danych pobranych z bazy danych

this.setState({imie: dane2.data[0].imie});

Dodatkowo jak zrobię console.log(imie) to nowa wartość w rodzicu wyświetlana jest poprawnie.

Nie wiem, czemu, ale mieszasz w przykładzie komponenty klasowe z komponentami funkcyjnymi.

this.state.imie, oraz this.setState -> komponent klasowy
useState + wszystkie inne hooki -> komponent funkcyjny

import React, { useState } from 'react';

const ChildrenComponent = ({ name }) => (<div>
  Imie: {name}
</div>);


const App = () => {
  const [name, setName] = useState('');

  const updateName = (event) => {
    setName(event.target);
  }

  return (<>
    <input type="text" onChange={updateName} value={name} />

    <ChildrenComponent name={name} />
  <>);
};

EDIT:

Nie musisz korzystać z hooków useState w komponentach potomnych jeśli nie modyfikujesz tych danych i nie potrzebujesz zapisać róźnicy. Możesz wyświetlić bezpośrednio wartość z propsa.

Dla testów chciałem napisać dwa komponenty, jeden za pomocą klasy, a drugi za pomocą funkcji i wymieniać pomiędzy nimi dane. Rozumiem że tak nie robić?

Xarviel napisał(a):

Nie wiem, czemu, ale mieszasz w przykładzie komponenty klasowe z komponentami funkcyjnymi.

this.state.imie, oraz this.setState -> komponent klasowy
useState + wszystkie inne hooki -> komponent funkcyjny

import React, { useState } from 'react';

const ChildrenComponent = ({ name }) => (<div>
  Imie: {name}
</div>);


const App = () => {
  const [name, setName] = useState('');

  const updateName = (event) => {
    setName(event.target);
  }

  return (<>
    <input type="text" onChange={updateName} value={name} />

    <ChildrenComponent name={name} />
  <>);
};

Xarviel napisał(a):

Nie wiem, czemu, ale mieszasz w przykładzie komponenty klasowe z komponentami funkcyjnymi.

this.state.imie, oraz this.setState -> komponent klasowy
useState + wszystkie inne hooki -> komponent funkcyjny

import React, { useState } from 'react';

const ChildrenComponent = ({ name }) => (<div>
  Imie: {name}
</div>);


const App = () => {
  const [name, setName] = useState('');

  const updateName = (event) => {
    setName(event.target);
  }

  return (<>
    <input type="text" onChange={updateName} value={name} />

    <ChildrenComponent name={name} />
  <>);
};

virusek391 napisał(a):

Dla testów chciałem napisać dwa komponenty, jeden za pomocą klasy, a drugi za pomocą funkcji i wymieniać pomiędzy nimi dane. Rozumiem że tak nie robić?

Na etapie nauki jest to jak najbardziej okej, bo po prostu testujesz jakie są różnice pomiędzy nimi.

Gdybyś wrzucił cały swój przykład to może dałoby się stwierdzić, gdzie zrobiłeś błąd.

W pliku rodzic znajduje się komponent <KomponentModyfikujKontrahentaSub wyswietl={this.state.otworz_komponent_modyfkuj_kontrahenta_sub} anuluj={this.Przycisk_komponent_modyfikuj_kontrahenta_sub_ukryj} imie={this.state.imie} /> do które chce przesłać dane.

W rodzicu wybieram sobie kontrahenta:

Po wybraniu kontrahenta ma uzupełnić jego dane w drugim formularzu. Dane pobrane zostaną z bazy danych.
Ale niestety nie wstawia mi żadnych wartości jak widać poniżej :(

rodzic.js, itp.

virusek391 napisał(a):

Dla testów chciałem napisać dwa komponenty, jeden za pomocą klasy, a drugi za pomocą funkcji i wymieniać pomiędzy nimi dane. Rozumiem że tak nie robić?

Na etapie nauki jest to jak najbardziej okej, bo po prostu testujesz jakie są różnice pomiędzy nimi.

Gdybyś wrzucił cały swój przykład to może dałoby się stwierdzić, gdzie zrobiłeś błąd.

rodzic.jsdziecko.js

Te dwa pliki są strasznie długie i ciężko wskazać przyczynę bez odpalenia aplikacji, ale spróbuj prześledzić wszystkie miejsca w których pojawiają się właściwości, które przekazujesz.

export default class KomponentModyfikujKontrahenta extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pobierz_kontrahentow: [],
            wybrany_kontrahent: -1,
            otworz_komponent_modyfkuj_kontrahenta_sub: false,
            imie: props.imie, // <--- czy tutaj na pewno powinno być props?
            komunikat_pokaz1: false,
            nazwisko: '',
            telefon: '',
        }
    }

componentDidUpdate(prevProps, prevState) {
      if (this.state.wybrany_kontrahent != -1) {
          axios.get('http://192.168.1.4:3333/pobierz_dane_kontrahenta_szczegolowe/?id=' + this.state.wybrany_kontrahent)
              .then((dane2) => {
                  this.setState({ imie: dane2.data[0].nazwisko }); // <-- do imienia przypisujesz nazwisko
                  this.setState({ nazwisko: dane2.data[0].nazwisko });
                  this.setState({ telefon: dane2.data[0].telefon });
              })

      }
  }

Udało mi się rozwiązać problem z przesłaniem imienia z bazy danych do komponentu dziecka.
Teraz mam kolejny problem ponieważ w samym formularzu dziecka, nie mogę zmienić imienia na inne, ponieważ wciąż renderowane jest imię z bazy danych.

Xarviel napisał(a):

Te dwa pliki są strasznie długie i ciężko wskazać przyczynę bez odpalenia aplikacji, ale spróbuj prześledzić wszystkie miejsca w których pojawiają się właściwości, które przekazujesz.

export default class KomponentModyfikujKontrahenta extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pobierz_kontrahentow: [],
            wybrany_kontrahent: -1,
            otworz_komponent_modyfkuj_kontrahenta_sub: false,
            imie: props.imie, // <--- czy tutaj na pewno powinno być props?
            komunikat_pokaz1: false,
            nazwisko: '',
            telefon: '',
        }
    }

componentDidUpdate(prevProps, prevState) {
      if (this.state.wybrany_kontrahent != -1) {
          axios.get('http://192.168.1.4:3333/pobierz_dane_kontrahenta_szczegolowe/?id=' + this.state.wybrany_kontrahent)
              .then((dane2) => {
                  this.setState({ imie: dane2.data[0].nazwisko }); // <-- do imienia przypisujesz nazwisko
                  this.setState({ nazwisko: dane2.data[0].nazwisko });
                  this.setState({ telefon: dane2.data[0].telefon });
              })

      }
  }

Problem udało się już rozwiązać :)