Блог

Я хочу получить ввод в начале веб-страницы от пользователя о его/ее имени и отобразить его на экране. Я создал переменную let componentDidMount , но она запрашивает снова и снова бесконечно. И в других методах это говорит fullname undefined об обратном . Как правильно это сделать?

 import './App.css';
import React, { Component } from 'react';
import Clock from './Clock';

class App extends Component {
  state = {
    secondRatio: 0,
    minuteRatio: 0,
    hourRatio: 0
  }

  getName() {
    let fullname = prompt("Lutfen isim giriniz:");
    return fullname;
  }

  componentDidMount() {
    setInterval(() => (
      this.setClock()
    ), 1000);
    console.log(this.fullname);
  }

  setClock = () => {
    const currentDate = new Date;
    let secondRatio = currentDate.getSeconds() / 60;
    let minuteRatio = (secondRatio   currentDate.getMinutes()) / 60;
    let hourRatio = (minuteRatio   currentDate.getHours()) / 12;
    this.setState({ secondRatio: secondRatio });
    this.setState({ minuteRatio: minuteRatio });
    this.setState({ hourRatio: hourRatio });
  }

  render() {
    const { secondRatio, minuteRatio, hourRatio } = this.state;

    return (
      <fragment>
        <div>  <h1 className="text1">Hello, {this.getName().fullname} ! Welcome! </h1>
          <div className="test"><Clock secondRatio={secondRatio} minuteRatio={minuteRatio} hourRatio={hourRatio} />
          </div>
        </div>
      </fragment>
    );
  }
}

export default App;
 

В fullname вашем классе нет свойства, поэтому this.fullname оно есть всегда undefined . Это не связано с fullname переменной, используемой в getName методе.

Что вы могли бы сделать, так это создать fullname свойство в своем классе и присвоить этому свойству запрошенное значение в componentDidMount :

 class App extends Component {
  fullname = undefined;

  state = {
    secondRatio: 0,
    minuteRatio: 0,
    hourRatio: 0
  };

  getName() {
    this.fullname = prompt("Lutfen isim giriniz:");
  }

  componentDidMount() {
    this.getName();
    setInterval(() => (
      this.setClock()
    ), 1000);
  }

  setClock = () => {
    const currentDate = new Date;
    let secondRatio = currentDate.getSeconds() / 60;
    let minuteRatio = (secondRatio   currentDate.getMinutes()) / 60;
    let hourRatio = (minuteRatio   currentDate.getHours()) / 12;
    this.setState({ secondRatio: secondRatio });
    this.setState({ minuteRatio: minuteRatio });
    this.setState({ hourRatio: hourRatio });
  };

  render() {
    const { secondRatio, minuteRatio, hourRatio } = this.state;

    return (
      <fragment>
        <div>  <h1 className="text1">Hello, {this.fullname} ! Welcome! </h1>
          <div className="test"><Clock secondRatio={secondRatio} minuteRatio={minuteRatio} hourRatio={hourRatio} />
          </div>
        </div>
      </fragment>
    );
  }
}
 

другой способ

 import './App.css';
import React, { Component } from 'react';
import Clock from './Clock';


class App extends Component {

  state = {
    secondRatio: 0,
    minuteRatio: 0,
    hourRatio: 0,
    fullname: '',
  }

  componentDidMount() {
    let fullname = prompt("Lutfen isim giriniz:");
    this.setState({ ...this.state, fullname });
    setInterval(() => (
      this.setClock()
    ), 1000);
    console.log(this.state.fullname);
  }

  setClock = () => {
    const currentDate = new Date;
    let secondRatio = currentDate.getSeconds() / 60;
    let minuteRatio = (secondRatio   currentDate.getMinutes()) / 60;
    let hourRatio = (minuteRatio   currentDate.getHours()) / 12;
    this.setState({ secondRatio: secondRatio });
    this.setState({ minuteRatio: minuteRatio });
    this.setState({ hourRatio: hourRatio });
  }

  render() {

    const { secondRatio, minuteRatio, hourRatio } = this.state;

    return (
      <fragment>
        <div>  <h1 className="text1">Hello, {this.state.fullname} ! Welcome! </h1>
          <div className="test"><Clock secondRatio={secondRatio} minuteRatio={minuteRatio} hourRatio={hourRatio} />
          </div>
        </div>
      </fragment>
    );
  }
}

export default App;