React结合Material-UI自定义TextField组件传入初始值不显示问题

核心问题根源 #

• componentWillReceiveProps 是 React 遗留生命周期，仅在组件接收更新的 props 时触发，初次挂载时不会执行。你的 MyTextField 构造函数把内部 state 的 data 初始化为空字符串，初次渲染时不会同步父组件传入的初始 value，因此输入框首次渲染为空，只有手动输入触发内部 handleChange 更新 state 后才会显示内容。
• 传参约定不一致：MyTextField 的 handleChange 给父组件的 onChange 回调传的是 event.target.value 字符串，但父组件的 handleTitleChange 却把入参当作 event 对象读取 event.target.value，两者约定不一致会导致父组件无法拿到正确的输入值。
• 旧生命周期风险：componentWillReceiveProps 已被 React 标记为不安全，后续大版本迭代可能被移除，不建议继续使用。

修复方案 #

方案1（推荐）：改为完全受控组件，移除子组件冗余状态 #

父组件已经维护了输入值的状态，完全没必要在 MyTextField 内部再存一份冗余状态，从根源避免状态不同步问题，同时对齐传参约定。
修复后的 MyTextField 代码：

import React, { Component } from 'react';
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

export default class MyTextField extends Component {
  handleChange = (event) => {
    // 直接透传原生 event 对象，和父组件回调约定对齐
    this.props.onChange(event);
  }

  render() {
    return (
      <Grid container spacing={1}>
        <TextField
          label={this.props.title}
          required={this.props.required}
          value={this.props.value}
          onChange={this.handleChange}
        />
      </Grid>
    )
  }
}

父组件原有代码无需调整，即可正常渲染初始值和同步输入。

方案2：保留子组件内部状态的修复方式 #

如果业务需要子组件保留内部 state 做额外处理，需要修改两处逻辑：

1. 构造函数初始化 state 时同步父组件传入的初始值
2. 用 React 推荐的 static getDerivedStateFromProps 替代旧的 componentWillReceiveProps，同时修复 value 为空字符串、0 这类 falsy 值时不同步的问题
   修复后的 MyTextField 代码：

import React, { Component } from 'react';    
import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';

export default class MyTextField extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始化时直接从 props 读取初始值
      data: props.value || ''
    }
  }

  // 替代 componentWillReceiveProps 的新生命周期，初次挂载和 props 更新时都会执行
  static getDerivedStateFromProps(nextProps, prevState) {
    // 仅当 props 传入的 value 和当前内部 state 不一致时才更新，避免不必要的重渲染
    if (nextProps.value !== prevState.data) {
      return { data: nextProps.value };
    }
    return null;
  }

  handleChange = (event) => {
    const currentValue = event.target.value;
    this.setState({ data: currentValue });
    // 透传原生 event 对象给父组件，对齐父组件回调约定
    this.props.onChange(event);
  }

  render() {
    return (
      <Grid container spacing={1}>
        <TextField
          label={this.props.title}
          required={this.props.required}
          value={this.state.data}
          onChange={this.handleChange}
        />
      </Grid>
    )
  }
}

内容的提问来源于stack exchange，提问作者Mostafa Ghasemi