Question

所以我最近开始向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;

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

因此，我要做的是单击按钮时，他们的对象对象将动态合并，并且更新的内容显示在网页上。另外，请问如果这是一个不好的问题，我真的很陌生。

Answer 1

这是您可以使用的代码，单击Run this snippet以查看其工作方式：

要进行的更改：

1-将小写person的{{1}}组件更改为p

2- Person是一个函数，您需要将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
);

单击按钮后反应状态不会改变

1 个答案: