时间戳

首页 > 解决方案 > React 道具和状态值不更新

javascript - React 道具和状态值不更新

问题描述

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

应用程序.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;

组件 - userInput.js


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

export default userInput;

组件 - userOutput.js

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;

标签： javascripthtmlreactjsreact-props

解决方案

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

    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" }
      ]
    });

推荐阅读