用static getDerivedStateFromProps替换componentWillReceiveProps

Question

我遵循了一个教程，我知道componentWillReceiveProps很快就会退出React，所以我尝试用静态的getDerivedStateFromProps替换它；

因此，我有一个表单，可以在其中添加用户个人资料，然后编辑该个人资料。使用componentWillReceiveProps可以在编辑配置文件页面中获取数据，并且可以对其进行编辑，但是使用getDerivedStateFromProps只能获取它，但是我无法在输入字段中键入任何内容。

谁能告诉我为什么？

状态：

state = {
    displaySocialInputs: false,
    handle: '',
    company: '',
    website: '',
    location: '',
    skills: '',
    errors: {},
  };

componentWillReceiveProps：

componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }

    if (nextProps.profile.profile) {
      console.log(nextProps.profile.profile)
      const profile = nextProps.profile.profile;

      // Bring skills array back to CSV
      const skillsCSV = profile.skills.join(',');

      // If profile field doesnt exist, make empty string
      profile.company = !isEmpty(profile.company) ? profile.company : '';
      profile.website = !isEmpty(profile.website) ? profile.website : '';
      profile.location = !isEmpty(profile.location) ? profile.location : '';
      profile.skills= !isEmpty(profile.skills) ? profile.skills : '';

      // Set component fields state
      this.setState({
        handle: profile.handle,
        company: profile.company,
        website: profile.website,
        location: profile.location,
        skills: skillsCSV,
      });
    }
  }

和静态的getDerivedStateFromProps，我将其放置为上面的一个：

static getDerivedStateFromProps(nextProps, prevState) {
    // if there is an error
    if (nextProps.errors !== prevState.errors) {
      // then add it to errors object
      return { errors: nextProps.errors };
    }

    if (nextProps.profile.profile) {
      console.log(nextProps.profile.profile)
      const profile = nextProps.profile.profile;

      // Bring skills array back into CSV
      const skillsCSV = profile.skills.join(',');

      // If profile field doesn't exist, make empty string
      // if is not empty, then use it, else add ''
      profile.company = !isEmpty(profile.company) ? profile.company : '';
      profile.website = !isEmpty(profile.website) ? profile.website : '';
      profile.location = !isEmpty(profile.location) ? profile.location : '';
      profile.skills = !isEmpty(profile.skills) ? profile.skills : '';

      // Set component fields state
      return {
        handle: profile.handle,
        company: profile.company,
        website: profile.website,
        location: profile.location,
        skills: skillsCSV
      }
    }
    return null;
  };

我在互联网上进行了很多搜索，发现使用getDerivedStateFromProps时，您需要componentDidUpdate：

componentDidUpdate(prevProps, prevState) {
    if (prevProps.errors !== this.props.errors) {
      this.setState({ errors: this.props.errors })
    }

    if (prevProps.profile !== this.props.profile) {
      const profile = this.props.profile.profile;
      // Bring skills array back into CSV
      // join back into a string by comma
      const skillsCSV = profile.skills.join(',');

      // If profile field doesn't exist, make empty string
      // if is not empty, then use it, else add ''
      profile.company = !isEmpty(profile.company) ? profile.company : '';
      profile.website = !isEmpty(profile.website) ? profile.website : '';
      profile.location = !isEmpty(profile.location) ? profile.location : '';
      profile.status = !isEmpty(profile.status) ? profile.status : '';
      profile.skills = !isEmpty(profile.skills) ? profile.skills : '';

      // Set component fields state
      this.setState({
        handle: profile.handle,
        company: profile.company,
        website: profile.website,
        location: profile.location,
        status: profile.status,
        skills: skillsCSV
      });
    }
  }