React 踩坑记录

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

const AskModal = props => {
  const { modalName, saveModal } = props;
  const [text, setText] = useState(modalName || '');
  useEffect(() => {
    setText(modalName); // 关键点，应为setText(modalName || '')
  }, [modalName]);
  return (
    
      
         setText(e.currentTarget.value)} />
      
      
备注：修改自定义模版后原模版将被覆盖，请确定是否保存当前模版？
      

         saveModal(text)}>
          保存
        
      
    
  );
};

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