项目CodeReview

1、Cannot update a component from inside the function body of a different component

https://stackoverflow.com/questions/60526786/react-warning-cannot-update-a-component-from-inside-the-function-body-of-a-diff

2、select 数据源删除后，当前选择的item不会消失，需要手动清除一下

3、https://github.com/ant-design/ant-design/issues/18283

react 组件内存泄漏

Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

无法对未挂载的组件执行响应状态更新。这是一个不允许的操作，它表明您的应用程序内存泄漏。要修复，请在componentWillUnmount取消方法中的所有订阅和异步任务。

• 方案1：在componentWillUnmount钩子函数在组件销毁时将异步方法撤销 ```javascript componentWillUnmount(){ this.setState = ()=> false; }

componentWillUnmount = () => { this.setState = (state,callback)=>{ return; }; }

- 方案2：使用标记记录页面的销毁
```javascript
constructor(props) {
    super(props);
    this._isMounted = false;  // 设立标记
}
componentDidMount() {
   this._isMounted = true;
   this._isMounted && fetch(`http://localhost:8000/albums`)
   .then((response) =>
      response.json())
   .then((data) => {
      this.setState({ album : data });
    }).catch((error) => {
        console.log("Error " + error)
    })
}
componentWillUnmount() {
    this._isMounted = false;
 }

Antd 时间类组件

• 禁用某一段时间

  • 禁用日期

    limitDay(currentDate: any) {
    const today = moment();
    return currentDate.isBefore(today, 'day');
    }

  • 禁用时间

    // desc 限制时间（不得早于当前时间）
    limitTime(selected: any) {
    const selectDate = selected ? selected : moment();
    let disabledHours = 0;
    let disabledMinutes = 0;
    const selest = selectDate.format('YYYY-MM-DD');
    const now = moment().format('YYYY-MM-DD');
    if (selest === now) {
     const selectHour = selectDate.hour();
     const nowHour = moment().hour();
     const nowMinute = moment().minute() + 1;
     disabledHours = nowHour;
     selectHour === nowHour && (disabledMinutes = nowMinute);
    }
    return {
     disabledHours: () => (disabledHours ? range(0, disabledHours) : []),
     disabledMinutes: () => (disabledMinutes ? range(0, disabledMinutes) : []),
     disabledSeconds: () => [],
    };
    }

对于无法用Form包裹的组件

• 有些Form.Item 后面可以通过增加元素实现需求

  <Form.Item label="InputNumber">
   <div style={{ display: 'flex', flexDirection: 'row' }}>
      {getFieldDecorator('input-number', { initialValue: 3 })(<Input style={{ width: 200 }} />)}
          <Button>12</Button>
           <Button>21221</Button>
  </div>
  </Form.Item>

• 无法用form包裹的，可以将其抽离出去，形成一个单独的组件

  1、组件传入一个value 2、在组件中操作、处理逻辑，最终通过 onChange 事件将 value 传递到外部 给 Form Item 使用

class InputWithTips extends Component<IProps, Istate> {
    static getDerivedStateFromProps(nextProps: any) {    // 重点
        // Should be a controlled component.
        if ('value' in nextProps) {
            return {
                number: nextProps.value,
                // ...(nextProps.value || {}),
            };
        }
        return null;
    }
    constructor(props: any) {
        super(props);
        this.state = {
            number: props.value,
        }
    }
    handleChange = (e: any) => {
        this.setState({ number: e.target.value })
        const { onChange } = this.props;                // 重点
        if (onChange) {
            onChange(e.target.value)
        }
    }
    render() {
        const { number } = this.state;
        const { tips, addonAfter, style, placeholder, disabled } = this.props;
        return (
            <React.Fragment>
                <Input
                    style={style}
                    addonAfter={addonAfter}
                    placeholder={placeholder}
                    value={number}
                    disabled={disabled}
                    onChange={(e: any) => {
                        this.handleChange(e)
                    }}
                />
                {tips && <span>（{tips}）</span>}
            </React.Fragment>
        )
    }
}
export default InputWithTips;

• 不推荐 放弃Form.item 实现的功能，实现一个可控组件， 通过 onChange 等收集数据

实现页面Form表单的方式

• 编写DOM形式

  <Form>
  <Form.Item label="模板名称">
    {getFieldDecorator('templateName', {
    rules: [{ required: true, message: '请输入模板名称' }, { validator: CHECK_Input_Len(20) }],
            })(<Input placeholder="请输入模板名称" />)}
  </Form.Item>
  <Form.Item label="发布内容">
    {getFieldDecorator('templateContent', {
    rules: [{ required: true, message: '请输入发布内容' }, { validator: CHECK_Input_Len(50) }],
             })(<TextArea placeholder="请输入发布内容" autoSize={{ minRows: 3, maxRows: 5 }} />)}
  </Form.Item>
  </Form>

• 编写数据，渲染DOM形式

项目中CSS

• 通过 styled-components ```javascript import styled from ‘styled-components’;

// import { createGlobalStyle } from ‘styled-components’; // 创建全局样式

export const Container = styled.divbackground: #fff; margin: 24px; padding: 24px; minheight: calc(100% - 48px); .ant-form-item:last-child { margin-bottom: 0; };

render(){ xxxx }

- **JSX 中写 style**
```javascript
<div style={{width: 102, textAlign: 'center'}}>xxx</div>

• 引入CSS样式表 ```javascript import styled from ‘./style.less’;

render(){

// 外部的 style.less 样式表 .countDownContainer{ font-size: 14px; font-weight: 400; color: rgba(26, 26, 26, 0.85); line-height: 20px; .paragraph { margin-bottom: 15px; } } ```