javascript - 未在输入字段中获取所需值 React redux 或 ReactJS

Question

import React, { Component } from 'react';
let _ = require('lodash');

import {bindActionCreators} from "redux";
import {connect} from 'react-redux';

import {fetchedZonesEdit} from '../../actions/';

class InfoRow extends Component {

  constructor(props){
    super(props); 
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {

        this.setState({
            [event.target.name]: event.target.value
        });

    }

    render() {
        return (
            
            <tr>
                <td>
                  {this.props.zone}
                </td>
                <td>{this.props.zoneValue}
                <input type="text"
                   className="form-control"
                   defaultValue={this.props.zoneValue}
                   value={this.props.name}
                   name={this.props.zone}
                   onChange={this.handleInputChange}
                />
                </td>
            </tr>
        )
    }
}

class ZoneDetailsEdit extends Component {

    render() {

        const rows = [];
        let a = this.props.ezn;
        

       Object.keys(this.props.ezn).map((keyName, keyIndex) =>{

          return rows.push(<InfoRow zone={keyName} zoneValue={a[keyName].toString()} key={keyIndex}/>)
       });

        return (


            <div className="col-md-6">
                <div className="">

                  <table className="table table-clear">
                    <tbody>
                      {rows}
                    </tbody>
                  </table>
                 </div>
                 <div className="row px-1" >
                      <div className="px-2">
                        <button className="btn btn-sm btn-info">Save</button>
                 </div></div>
          </div>

        )

    }


}

class ZoneDetailEditComponent extends Component {

  componentWillMount = () => {
        this.props.fetchedZonesEdit(this.props.location.query.id);
    };

  
  render() {
    
    return (
        <div className="container px-3 mr-3">
            <div className="row">
              <div className="col-md-6 col-md-offset-3"><h1>Edit Tag Information</h1></div>
            </div>
            <br/>
            <br/>
                { this.props.ezn != null?
            <div>
                <ZoneDetailsEdit ezn={this.props.ezn}/>
            </div> :
                    <center><br /><h1><img src={'img/avatars/default.gif'} alt="Loading"/><br />Loading</h1></center>

            }
        </div>
    )
  }
}

function mapStateToProps(state) {
    return {
        ezn: state.zones
    }

}


function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchedZonesEdit: fetchedZonesEdit}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(ZoneDetailEditComponent);

这是我提供的片段我现在正在做的是，我已经从 api 获取了数据并显示在输入字段中，但问题是数据获取正确，但是当我在输入字段外部打印时，它工作正常，但是当我默认输入输入字段时值它不起作用还提供了截图打开页面时默认值是上一页的设置，但是刷新时它工作正常

Answer 1

defaultValue 只能在 Uncontrolled components 上使用.

不要使用 defaultValue，而是为商店中的name 分配默认值。

此外，如果您使用的是 redux，请勿使用 this.setState。您正在将新值分配给您从未读过的 this.state.zone 。