Состояние реакции не меняется при нажатии кнопки - PullRequest
Новая
       37

Состояние реакции не меняется при нажатии кнопки

2 голосов
/ 25 мая 2020

, поэтому я недавно начал изучать реакцию Udemy, я написал этот код, который динамически изменяет состояние страницы при нажатии кнопки. У наставника такой же код, и его код работает отлично, а мой - нет. Могу ли я узнать, что не так?

Вот мое приложение. js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Person from './Person/Person';


class App extends Component {

  state = {
    persons: [
      {name : 'Honey', age : 23},
      {name : 'Test', age: 19},
      {name : 'Test2', age: 21}
    ],
    otherState : 'Hmm'
  }

//edit

  switchPersonHandler = () => {
    this.setState = ( {
      persons: [
        {name : 'Honey', age : 23},
        {name : 'Ahhh', age: 19},
        {name : 'Change this', age: 21}
      ]
    } )
}


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React :)</h1>
        </header>
        <button onClick={this.switchPersonHandler}>Switch Name</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}/>
        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
      </div>
    );
  }
}

export default App;

Вот мои люди. js

import React from 'react'

const person = (props) => {
return  <div>
            <p>My name is {props.name} and my age is {props.age}</p>
        </div>

}

export default person;

Итак, что я хочу сделать, это когда кнопка нажата, объект людей динамически объединяется, и обновленный контент отображается на веб-странице. Кроме того, извините, если это плохой вопрос, я новичок в этом.

1 Ответ

1 голос
/ 25 мая 2020

Вот код, который вы можете использовать, нажмите Run this snippet, чтобы увидеть, как это работает:

Изменения, которые необходимо внести:

1- заменить person компонент на нижний регистр От p до Person

2- this.setState - это функция, и вам нужно передать state в качестве аргумента 

function Person(props){
return  (<div>
            <p>My name is {props.name} and my age is {props.age}</p>
        </div>)

}

class App extends React.Component {

  state = {
    persons: [
      {name : 'Honey', age : 23},
      {name : 'Test', age: 19},
      {name : 'Test2', age: 21}
    ],
    otherState : 'Hmm'
  }


  switchPersonHandler = () => {
    this.setState({
      persons: [
        {name : 'working', age : 23},
        {name : 'Ahhh', age: 19},
        {name : 'Change this', age: 21}
      ]
    })
}


  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">Welcome to React :)</h1>
        </header>
        <button onClick={this.switchPersonHandler}>Switch Name</button>
        <Person name={this.state.persons[0].name} age={this.state.persons[0].age}/>
        <Person name={this.state.persons[1].name} age={this.state.persons[1].age}/>
        <Person name={this.state.persons[2].name} age={this.state.persons[2].age}/>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
...