时间戳

首页 > 解决方案 > 按钮单击时反应状态不改变

javascript - 按钮单击时反应状态不改变

问题描述

所以我最近开始向 Udemy 学习反应，我编写了这段代码，它在单击按钮时动态更改页面的状态。导师有相同的代码，他的代码工作得很好，但我的没有。我可以知道有什么问题吗？

这是我的 App.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;

这是我的persons.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;

所以，我想要做的是当点击按钮时，他们的个人对象被动态合并并且更新的内容显示在网页上。另外，如果这是一个不好的问题，请原谅我，我对此真的很陌生。

标签： javascriptreactjsstate

解决方案

这是您可以使用的代码，单击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>

推荐阅读