Блог

Я пытаюсь обновить приведенное ниже «число» внутри моего метода рендеринга с помощью кнопки толкателя. Я добавил функцию onClick к кнопке, нацеленной на мою переменную «num», но она ее не запускает? Я также попытался превратить ее в функцию со стрелкой, но это не сработало. Я что-то делаю? Константа «num» будет выполняться и циклически перебирать число, сгенерированное методом RandomPerson .. это всего лишь тест, но я хочу знать, что я делаю неправильно.

 
class App extends Component {
  state = {
    persons: [
      { name: 'test1', num: randomNum()},
      { name: 'test2', num: randomNum()}
    ]
  }

  randomPerson =() =>{
    return Math.floor(Math.random()* this.state.persons.length)
  }

  render(){
    const num = this.randomPerson()
    return (
      <React.Fragment>
        <button onClick={this.num}>Switch Person</button>
        <div>
          <Person name={this.state.persons[num].name} randomNum={this.state.persons[num].num} />
        </div>
      </React.Fragment>
    
    );
  }
}

export default App;

 

onClick В React ожидается функция. в вашем коде вы передали возвращаемое значение this.randomPerson , которое не является функцией.

Попробуйте это:

 class App extends Component {
  state = {
    persons: [
      { name: 'test1', num: randomNum()},
      { name: 'test2', num: randomNum()}
    ]
  }

  randomPerson =() =>{
    return Math.floor(Math.random()* this.state.persons.length)
  }

  render(){
    return (
      <React.Fragment>
        <button onClick={this.randomPerson}>Switch Person</button>
        {/* ^-- I changed this and removed the num declaration */}
        <div>
          <Person name={this.state.persons[num].name} randomNum={this.state.persons[num].num} />
        </div>
      </React.Fragment>
    
    );
  }
}

export default App;
 

Но я не уверен, что вы пытаетесь сделать с сгенерированным новым случайным числом randomPerson . Я предполагаю, что вы можете использовать это число для выбора случайного пользователя. Для этого вам нужно будет добавить сгенерированное случайное число из randomPerson состояния into. К сожалению, я полностью забыл, как это сделать в компонентах класса… Итак, я сделал это для вас с помощью функционального компонента ниже:

 function App() {
    const randomPerson = () => Math.floor(Math.random() * this.state.persons.length);

    const [person, setPerson] = useState([
        { name: 'test1', num: randomNum()},
        { name: 'test2', num: randomNum()}
    ]);
    const [currentPerson, setCurrentPerson] = useState(randomPerson());

    const switchPerson = () => {
        setCurrentPerson(randomPerson());
    };

    return (
        <React.Fragment>
            <button onClick={switchPerson}>Switch Person</button>
            <div>
                <Person name={person[currentPerson].name} randomNum={person[currentPerson].num} />
            </div>
        </React.Fragment>
    );
}