Javascript 反应道具和状态-值不'；t更新

这是一个使用道具和状态的简单react示例。当用户在给定的输入槽中键入名称时，输出部分中显示的名称应相应更新。但该值不会更新。你能在代码中找到错误吗

App.js

import "./App.css";
import UserInput from "./Person/userInput";
import UserOutput from "./Person/userOutput";

class App extends Component {
  state = {
    userName: [
      { name: "Max", age: 28, proff: "doctor" },
      { name: "Tom", age: 20, proff: "engg" },
      { name: "Dev", age: 23, proff: "writter" }
    ]
  };

  eHandler = event => {
    this.setState = ({
      userName: [
        { name: event.target.value, age: 28, proff: "doctor" },
        { name: event.target.value, age: 20, proff: "engg" },
        { name: event.target.value, age: 23, proff: "writter" }
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <div className="card">
          <UserOutput
            name={this.state.userName[0].name}
            age={this.state.userName[0].age}
            proff={this.state.userName[0].proff} 
          />
          <UserInput changed={this.eHandler} />
        </div>
        <div className="card">
          <UserOutput
            name={this.state.userName[1].name}
            age={this.state.userName[1].age}
            proff={this.state.userName[1].proff}
          />
        </div>
        <div className="card">
          <UserOutput
            name={this.state.userName[2].name}
            age={this.state.userName[2].age}
            proff={this.state.userName[2].proff}
          />
          <UserInput changed={this.eHandler} />
        </div>
      </div>
    );
  }
}

export default App;

const userInput = props => {
  return (
    <div>
      <input type="text" onChange={props.changed}></input>
    </div>
  );
};

export default userInput;

import React from "react";

const userOutput = props => {
  return (
    <div>
      <p>
        {props.name} of age {props.age} is a {props.proff}
      </p>
    </div>
  );
};
export default userOutput;

导入“/App.css”； 从“/Person/UserInput”导入用户输入； 从“/Person/UserOutput”导入用户输出； 类应用程序扩展组件{ 状态={ 用户名：[ {姓名：“Max”，年龄：28岁，专业：“医生”}， {姓名：“汤姆”，年龄：20岁，专业：“英语”}， {姓名：“Dev”，年龄：23岁，专业：“Writer”} ] }; eHandler=事件=>{ this.setState=({ 用户名：[ {name:event.target.value，年龄：28岁，proff:“医生”}， {name:event.target.value，年龄：20岁，proff:“engg”}， {name:event.target.value，年龄：23，proff:“writer”} ] }); }; render（）{ 返回( ); } } 导出默认应用程序； 组件-userInput.js

import "./App.css";
import UserInput from "./Person/userInput";
import UserOutput from "./Person/userOutput";

class App extends Component {
  state = {
    userName: [
      { name: "Max", age: 28, proff: "doctor" },
      { name: "Tom", age: 20, proff: "engg" },
      { name: "Dev", age: 23, proff: "writter" }
    ]
  };

  eHandler = event => {
    this.setState = ({
      userName: [
        { name: event.target.value, age: 28, proff: "doctor" },
        { name: event.target.value, age: 20, proff: "engg" },
        { name: event.target.value, age: 23, proff: "writter" }
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <div className="card">
          <UserOutput
            name={this.state.userName[0].name}
            age={this.state.userName[0].age}
            proff={this.state.userName[0].proff} 
          />
          <UserInput changed={this.eHandler} />
        </div>
        <div className="card">
          <UserOutput
            name={this.state.userName[1].name}
            age={this.state.userName[1].age}
            proff={this.state.userName[1].proff}
          />
        </div>
        <div className="card">
          <UserOutput
            name={this.state.userName[2].name}
            age={this.state.userName[2].age}
            proff={this.state.userName[2].proff}
          />
          <UserInput changed={this.eHandler} />
        </div>
      </div>
    );
  }
}

export default App;

const userInput = props => {
  return (
    <div>
      <input type="text" onChange={props.changed}></input>
    </div>
  );
};

export default userInput;

import React from "react";

const userOutput = props => {
  return (
    <div>
      <p>
        {props.name} of age {props.age} is a {props.proff}
      </p>
    </div>
  );
};
export default userOutput;

const userInput=props=>{
返回(
);
};
导出默认用户输入；

组件-userOutput.js

import "./App.css";
import UserInput from "./Person/userInput";
import UserOutput from "./Person/userOutput";

class App extends Component {
  state = {
    userName: [
      { name: "Max", age: 28, proff: "doctor" },
      { name: "Tom", age: 20, proff: "engg" },
      { name: "Dev", age: 23, proff: "writter" }
    ]
  };

  eHandler = event => {
    this.setState = ({
      userName: [
        { name: event.target.value, age: 28, proff: "doctor" },
        { name: event.target.value, age: 20, proff: "engg" },
        { name: event.target.value, age: 23, proff: "writter" }
      ]
    });
  };

  render() {
    return (
      <div className="App">
        <div className="card">
          <UserOutput
            name={this.state.userName[0].name}
            age={this.state.userName[0].age}
            proff={this.state.userName[0].proff} 
          />
          <UserInput changed={this.eHandler} />
        </div>
        <div className="card">
          <UserOutput
            name={this.state.userName[1].name}
            age={this.state.userName[1].age}
            proff={this.state.userName[1].proff}
          />
        </div>
        <div className="card">
          <UserOutput
            name={this.state.userName[2].name}
            age={this.state.userName[2].age}
            proff={this.state.userName[2].proff}
          />
          <UserInput changed={this.eHandler} />
        </div>
      </div>
    );
  }
}

export default App;

const userInput = props => {
  return (
    <div>
      <input type="text" onChange={props.changed}></input>
    </div>
  );
};

export default userInput;

import React from "react";

const userOutput = props => {
  return (
    <div>
      <p>
        {props.name} of age {props.age} is a {props.proff}
      </p>
    </div>
  );
};
export default userOutput;

从“React”导入React；
const userOutput=props=>{
返回(

年龄的{props.name}{props.age}是一个{props.proff}

);
};
导出默认用户输出；

处理程序中的状态更新错误。应该是以下内容

    this.setState({
      userName: [
        { name: event.target.value, age: 28, proff: "doctor" },
        { name: event.target.value, age: 20, proff: "engg" },
        { name: event.target.value, age: 23, proff: "writter" }
      ]
    });

---

是的，现在它工作了，谢谢！但是为什么在使用“=”符号时没有显示任何错误呢？因为您实际上编写了有效的代码：您正在重新设置setState属性，它是有效的javascript。如果第二次触发处理程序，可能会出现错误，因为第二次它将不再是一个函数编辑：它实际上不会抛出任何东西，它只会重做assignmentoh。。是否有一种有效的方法来编写“eHandler”代码，以便只更新该特定div的名称而不更新任何其他div？如果不可能，欢迎任何其他建议！