关于javascript:React-踩坑记录

1. 受控组件和非受控组件

const AskModal = props => {const { modalName, saveModal} = props;
  const [text, setText] = useState(modalName || '');
  useEffect(() => {setText(modalName); // 关键点，应为 setText(modalName || '')
  }, [modalName]);
  return (
    <Panel title="保留自定义模版" width="300px" showX>
      <InputField label="模版名称">
        <input value={text} onChange={e => setText(e.currentTarget.value)} />
      </InputField>
      <div> 备注：批改自定义模版后原模版将被笼罩，请确定是否保留以后模版？</div>
      <div className="modal-btn">
        <Button style={{marginBottom: 16}} onClick={() => saveModal(text)}>
          保留
        </Button>
      </div>
    </Panel>
  );
};

代码如上，关键点在于父节点传入的 modalName 可能会是 undefined，这个时候须要给 text 一个默认的空字符串，否则就会变成非受控，从而触发 warning