Reactjs React-getDerivedStateFromProps-字段值将加载道具，但不会加载'；不变

我在控制台中收到一条警告，旧的生命周期功能组件将很快停止使用。它将替换为getDerivedStateFromProps。 我已经将redux连接到组件和操作，该组件和操作通过API请求获取数据。我在组件上设置了一个状态，一旦收到道具，我就更新了状态并在输入字段中显示数据。在输入字段上，我调用了onChange来更改更改字段中的值的状态

例如：

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchStationId, updateStation } from '../../actions/station';
import { STATION } from '../../actions/types';
import TemplatePage from '../templates/TemplatePage';
import Card from '../partials/Card';
import Msg from '../partials/Msg';
import Preloader from '../partials/Preloader';

class StationsEdit extends Component {

  state = {
    custom_id: '',
    phone: ''
  }

  componentDidMount() {
    this.props.fetchStationId({ id: parseInt(this.props.match.params.id, 10)})
  }


  componentWillReceiveProps(nextProps){
    if(nextProps.station.station !== undefined) {
      let { custom_id, phone } = nextProps.station.station;
      this.setState({
        custom_id: custom_id === null ? custom_id = '' : custom_id,
        phone: phone === null ? phone = '' : phone,
      });
    }
  }






  handleOnSubmit = e => {
    e.preventDefault();
    if(this.state.custom_id === '') {
      return this.props.pushStationMessage({ type: STATION.PUSH_MESSAGE, "status" : "error", "message": [{ msg: "Custom ID is missing" }], fields: [ 'custom_id' ] });
    }
    return this.props.updateStation({ station: { custom_id: this.state.custom_id, phone: this.state.phone } })
    .then(() => {
      if(this.props.station.status !== 'error') {
        this.props.history.push('/stations');
      }
    })
  }

  get msg() {
    if(this.props.station.station !== '') {
      return <Msg msg={this.props.station} />
    }
    return null;
  }

  render() {

    const { station, status } = this.props.station;
    const { custom_id, phone } = this.state;

    console.log('state', this.state)

    return (
      <TemplatePage>

        { /*this.msg*/ }
        { !station && status !== 'error' && <Preloader class='preloader preloader--centered' /> }


        <Card title='Edit Station' buttonBack={true} buttonLink='/stations' padding='large'>

          <form className="form">
            <div className="form-group">
              <label htmlFor="custom_id">
                Station ID
              </label>
              <input 
                type="text" 
                name="custom_id"
                id="custom_id" 
                value={custom_id}
                onChange={e => this.setState({ custom_id: e.target.value })}
              />
            </div>
            <div className="form-group">
              <label htmlFor="phone">
                Station phone
              </label>
              <input 
                type="text" 
                name="phone"
                id="phone" 
                value={phone}
                onChange={e => this.setState({ phone: e.target.value })}
              />
            </div>
            <div className="form-group">
              <input 
                type="submit" 
                value="Update station" 
                className="btn btn--primary card__footer--btn-left"
              />
            </div>
          </form>
          </Card>

      </TemplatePage>
    )
  }
}

export default connect(
  ({ station }) => ({ station }),
  { fetchStationId, updateStation }
)(StationsEdit);

import React，{Component}来自“React”
从'react redux'导入{connect}；
从“../../actions/station”导入{fetchStationId，updateStation}；
从“../../actions/types”导入{STATION}；
从“../templates/TemplatePage”导入TemplatePage；
从“../partials/Card”导入卡片；
从“../partials/Msg”导入消息；
从“../partials/preload”导入预加载程序；
类StationEdit扩展组件{
状态={
自定义\u id:“”，
电话：''
}
componentDidMount（）{
this.props.fetchStationId（{id:parseInt（this.props.match.params.id，10）}）
}
组件将接收道具（下一步）{
如果（nextrops.station.station！==未定义）{
让{custom_id，phone}=nextrops.station.station；
这是我的国家({
自定义\u id:custom\u id==null？自定义\u id=''：自定义\u id，
电话：电话===null？电话=''：电话，
});
}
}
handleOnSubmit=e=>{
e、 预防默认值（）；
if（this.state.custom_id==“”）{
返回此.props.pushStationMessage（{type:STATION.PUSH_MESSAGE，status:“error”，“MESSAGE:[{msg:“缺少自定义ID”}]，字段：['Custom_ID']}）；
}
返回此.props.updateStation（{station:{custom\u id:this.state.custom\u id，phone:this.state.phone}}）
.然后（（）=>{
如果（this.props.station.status！=='error'）{
this.props.history.push（'/stations'）；
}
})
}
获取msg（）{
如果（this.props.station.station！=''）{
返回
}
返回null；
}
render（）{
const{station，status}=this.props.station；
const{custom_id，phone}=this.state；
console.log（'state'，this.state）
返回(
{/*this.msg*/}
{！站和状态！=='error'&&}
站点ID
this.setState（{custom_id:e.target.value}）}
/>
车站电话
this.setState（{phone:e.target.value}）
/>
)
}
}
导出默认连接(
（{station}）=>（{station}），
{fetchStationId，updateStation}
)（站点编辑）；

这一切都非常好！现在我读到组件WillReceiveProps正在消失，这实际上是反模式。好的然而，用getDerivedStateFfromProps替换它将是一件更痛苦的事情。我设法更改了getDerviedStateFromProps的组件WillReceiveProps，它会像以前一样更新输入，但是现在尝试更改字段中的值时，每次都会被这些props覆盖。实际上，无论我在任何字段中键入什么，它们都不会更改值

import React, { Component } from 'react'
import { connect } from 'react-redux';
import { fetchStationId, updateStation } from '../../actions/station';
import { STATION } from '../../actions/types';
import TemplatePage from '../templates/TemplatePage';
import Card from '../partials/Card';
import Msg from '../partials/Msg';
import Preloader from '../partials/Preloader';

class StationsEdit extends Component {

  state = {
    custom_id: '',
    phone: ''
  }

  componentDidMount() {
    this.props.fetchStationId({ id: parseInt(this.props.match.params.id, 10)})
  }



  static getDerivedStateFromProps(nextProps, prevState) {
    console.log('nextProps',nextProps.station.station)
    console.log('prevState', prevState)
    if (prevState !== nextProps.station.station) {
      return {
        ...nextProps.station.station
      };
    }
    return null;
  }





  handleOnSubmit = e => {
    e.preventDefault();
    if(this.state.custom_id === '') {
      return this.props.pushStationMessage({ type: STATION.PUSH_MESSAGE, "status" : "error", "message": [{ msg: "Custom ID is missing" }], fields: [ 'custom_id' ] });
    }
    return this.props.updateStation({ station: { custom_id: this.state.custom_id, phone: this.state.phone } })
    .then(() => {
      if(this.props.station.status !== 'error') {
        this.props.history.push('/stations');
      }
    })
  }

  get msg() {
    if(this.props.station.station !== '') {
      return <Msg msg={this.props.station} />
    }
    return null;
  }

  render() {

    const { station, status } = this.props.station;
    const { custom_id, phone } = this.state;

    console.log('state', this.state)

    return (
      <TemplatePage>

        { /*this.msg*/ }
        { !station && status !== 'error' && <Preloader class='preloader preloader--centered' /> }


        <Card title='Edit Station' buttonBack={true} buttonLink='/stations' padding='large'>

          <form className="form">
            <div className="form-group">
              <label htmlFor="custom_id">
                Station ID
              </label>
              <input 
                type="text" 
                name="custom_id"
                id="custom_id" 
                value={custom_id}
                onChange={e => this.setState({ custom_id: e.target.value })}
              />
            </div>
            <div className="form-group">
              <label htmlFor="phone">
                Station phone
              </label>
              <input 
                type="text" 
                name="phone"
                id="phone" 
                value={phone}
                onChange={e => this.setState({ phone: e.target.value })}
              />
            </div>
            <div className="form-group">
              <input 
                type="submit" 
                value="Update station" 
                className="btn btn--primary card__footer--btn-left"
              />
            </div>
          </form>
          </Card>

      </TemplatePage>
    )
  }
}

export default connect(
  ({ station }) => ({ station }),
  { fetchStationId, updateStation }
)(StationsEdit);

import React，{Component}来自“React”
从'react redux'导入{connect}；
从“../../actions/station”导入{fetchStationId，updateStation}；
从“../../actions/types”导入{STATION}；
从“../templates/TemplatePage”导入TemplatePage；
从“../partials/Card”导入卡片；
从“../partials/Msg”导入消息；
从“../partials/preload”导入预加载程序；
类StationEdit扩展组件{
状态={
自定义\u id:“”，
电话：''
}
componentDidMount（）{
this.props.fetchStationId（{id:parseInt（this.props.match.params.id，10）}）
}
静态getDerivedStateFromProps（下一步，上一步）{
console.log（'nextrops'，nextrops.station.station）
console.log（'prevState'，prevState）
if（prevState！==nextrops.station.station）{
返回{
…下一站
};
}
返回null；
}
handleOnSubmit=e=>{
e、 预防默认值（）；
if（this.state.custom_id==“”）{
返回此.props.pushStationMessage（{type:STATION.PUSH_MESSAGE，status:“error”，“MESSAGE:[{msg:“缺少自定义ID”}]，字段：['Custom_ID']}）；
}
返回此.props.updateStation（{station:{custom\u id:this.state.custom\u id，phone:this.state.phone}}）
.然后（（）=>{
如果（this.props.station.status！=='error'）{
this.props.history.push（'/stations'）；
}
})
}
获取msg（）{
如果（this.props.station.station！=''）{
返回
}
返回null；
}
render（）{
const{station，status}=this.props.station；
const{custom_id，phone}=this.state；
console.log（'state'，this.state）
返回(
{/*this.msg*/}
{！站和状态！=='error'&&}
站点ID
this.setState（{custom_id:e.target.value}）}
/>
车站电话
this.setState（{phone:e.target.value}）
/>
)
}
}
导出默认连接(
（{station}）=>（{station}），
{fetchStationId，updateStation}
)（站点编辑）；

---

谁能给我指出正确的方向吗？我错过了什么？我需要从数据库的原始值只加载一次，然后由用户编辑（这是编辑形式）。感谢您的宝贵见解和评论。

您的情况将始终返回

true

，因为您正在比较两个对象。在JS中，