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