Reactjs setState不更新状态，甚至不更新回调

在输入字段更改时，将调用处理程序函数并更新状态，但状态不会更新。我知道setState是异步的，所以我将console.log放在回调中

以下是功能：

类WorkspaceEditModal扩展了React.PureComponent{ 构造器{ 超级作物； console.logprops.selectedWorkspace；//打印正确的值 此.state={ editWorkspaceName:props.selectedWorkspace， 存在：错误， }; } handleEditChange=event=>{//调用此处理程序 console.logevent.target.value；//打印新值 this.setState{editWorkspaceName:event.target.value}， =>{console.logthis.state.editWorkspaceName}；//仍然打印旧值 }; handleFocus=e=>e.target.select； handleKeyPress=e=>{ 如果e.key==‘输入’{ e、 防止违约； 这是我的工作空间； } }; 渲染{ const{editWorkspaceName，exists}=this.state； 让内容； 内容= 重命名工作区

工作空间名称 {无效&&

仅字母数字字符、连字符、空格和 允许使用下划线。

} 取消 使现代化 ; 常量contentStyle={ 宽度：“500px”， }; 回来 {content} ; } } 我不知道为什么会这样。这太疯狂了

---

感谢您的帮助。

您正在通过道具传递输入的默认值。这应该是您的输入默认值。它不应该更新子组件的状态

在这种情况下，应该更新父组件上的状态，而不是子组件上的状态。示例中的handleEditChange handleChange函数应该放在父组件中，然后通过props传递给输入。您希望通过该父函数在父函数中更改props值，以便setState正常工作

您可以使用getDerivedStateFromProps，但在这里似乎没有必要

---

您好，@1housand，我已经用您的代码进行了测试，效果良好。我想你对另一方的看法是错误的。您好，@DragonWhite，谢谢您的回复。我没有写这段代码，但最奇怪的是，还有另一个模态组件的代码非常相似，它工作得很好。Ofc在构造函数中使用“props”是可以的，因为构造函数中的“props”实际上与“this.props”相同。关于“状态应该在父级中更新”的论点，为什么？我不能同意不应从道具更新状态。道具旨在直接使用。如果要更改道具，则应该从更新道具的父组件更改道具。最好是状态独立于道具，但通常情况下，状态依赖于道具。为此，创建了“getDeriviedStateFromProps”生命周期挂钩。我看不出从道具设置初始状态有什么错误。查看ReactJS文档：。它特别指出：注意避免复制道具到状态！这是一个常见的错误，在遇到类似问题后，我一直遵循这个规则，避免使用道具设置状态为我解决了这个问题。getDeriviedStateFromProps生命周期将起作用，但对于一个简单的输入来说似乎没有必要。这里还有一页要签出以供参考：

class ParentWorkSpaceEditModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editWorkspaceName: 'whatever your original value is',
      exists: false,
    };
  }

  handleChange = event => {
    this.setState({ editWorkspaceName: event.target.value });
  };

  render() {
    const { editWorkspaceName, exists } = this.state;
    return (
      <ChildWorkspaceEditModal editWorkspaceName={editWorkspaceName} exists={exists} handleChange={this.handleChange} />
    )
  }
}

const ChildWorkspaceEditModal = ({ editWorkspaceName, exists, handleChange )} => {
  content = (
    <div className="save-workspace">
      <div className="modal-header">
        <div className="modal-title">
          <p>Rename Workspace</p>
        </div>
        <div className="modal-select">
          <span className="input-label">Workspace Name</span>
          <div>
            <input
              className="name-input"
              placeholder="Workspace Name"
              type="text"
              value={editWorkspaceName}
              onChange={handleChange}
            />
            {notValid && (
              <p className="invalid">
              Only alphanumeric characters, hyphens, spaces, and underscores are allowed.
              </p>
             )}
          </div>
        </div>
      </div>
      <div className="modal-footer">
        <button
          type="button"
          className="btn btn-default"
          onClick={this.onCloseModal}
        >
          Cancel
         </button>
         <button
           type="button"
           className="btn btn-primary"
           onClick={this.editWorkspace}
           disabled={notValid}
         >
          Update
         </button>
       </div>
     </div>
  );

  const contentStyle = {
    width: '500px',
  };

  return (
      <Modal
        isOpen={true}
        onClose={this.onCloseModal}
        contentStyle={contentStyle}
        shouldCloseOnOverlayClick={true}
      >
        {content}
      </Modal>
    )
}