React应用程序，从初始获取请求获取数据后，onChange不起作用

Question

 constructor (props) {
    super(props)
    this.state = {
      AyarAdi: '',
      Bilgi: '',
      FirmaKodu: '',
      icerik: {
        smsUser: '',
        smsApi: '',
        mesajAciklama: '',
        password: ''
      },
      errors: {}
    }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }


  componentDidMount () {
    this.props.AyarlarListesiAl(this.props.user.userCreds.FirmaKodu)
  }

  handleChange (event) {
    this.setState({
      icerik: {
        ...this.state.icerik,
        [event.target.name]: [event.target.value]
      }
    })
  }


 render(){
        <div>
          <InputGroup className='mb-3'>
            <FormControl
              name='password'
              placeholder='SMS Şifre'
              onChange={this.handleChange}
              value={
                this.props.data.AyarlarListesi[0] !== undefined
                  ? JSON.parse(this.props.data.AyarlarListesi[0].Bilgi).password
                  : this.state.icerik.password
              }
              style={{ maxWidth: 400, height: 40 }}
            />
            <span style={{ color: 'red' }}>
              {this.state.errors['password']}
            </span>
          </InputGroup>
        </div>
        }

const mapStateToProps = state => ({
  user: state.user,
  data: state.data
})

....

问题是，在componentDidMount中，我通过Redux action向服务器发送了一个get请求，它从redux reducer state中获取了我的数据； AyarlarListesi。我想将数据获取到输入元素值，因此当用户打开页面时，他/她可以更新以前的数据，只需在输入上更改它并单击提交。我可以成功地将数据放入输入，但我无法更改输入的值，它保持稳定，handleChange 函数不起作用。我怎样才能让它发挥作用？

Answer 1

您的 handleChange 函数只处理状态。但是，要显示的值最好来自 props，并且只有在 props 字段不可用时才会回退到 state 变量。

要在通过用户输入更改状态变量后显示它，您可以交换条件并设置它以便状态变量将被显示，除非它为空（并使用 props 变量作为后备），或者您可以改为更新获得新道具时的初始状态变量。

假设您从不从外部更改道具或不关心以后的更新，这将是我解决您问题的首选方式：

componentDidMount () {
  this.props.AyarlarListesiAl(this.props.user.userCreds.FirmaKodu);
  if (this.props.data.AyarlarListesi[0] !== undefined) {
    this.setState({
      icerik: {
        ...this.state.icerik,
        password: JSON.parse(this.props.data.AyarlarListesi[0].Bilgi).password,
      },
    });
  }
}

同样在您的 FormControl 中跳过检查是否设置了道具数据，而是始终使用 this.state.icerik.password 作为值。

如果您从外部获取的 props 可能发生变化，并且您希望在从外部传递新密码或 AyarlarListesi 时重新启动，则应再次更新 componentDidUpdate 中的状态：

componentDidUpdate (prevProps) {
  if (prevProps.data.AyarlarListesi !== props.data.AyarlarListesi && props.data.AyarlarListesi[0] !== undefined) {
    this.setState({
      icerik: {
        ...this.state.icerik,
        password: JSON.parse(this.props.data.AyarlarListesi[0].Bilgi).password,
      },
    });
  }
}