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 。