关于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