Question

已解决：defaultValue的行为与我的想法不同，我需要一个受控制的组件，请查看有关受控组件的React文档。

我想做什么：加载＆＃34;所有者＆＃34; Ajax调用后表单字段中的值。

问题是：＆＃34; componentDidMount（）＆＃34;功能不会更新 this.props.owner 。＆＃34;所有者＆＃34;值位于模态对话框内，当您单击＆＃34;编辑＆＃34;在前一个组件的行列表中，在第二次单击之后，所有行都完美地工作，但不在第一次加载中。

我的AppoModal组件：

class AppoModal extends Component {
  constructor(props) {
  super(props);
 }

 /** Load 'owner' in the form **/
 componentDidMount() {  
    let action = fetchAppos(this.props.routeParams.id);
   this.props.dispatch(action);
 }

 render() {
    return (
      <div>
        <input name="owner" defaultValue={this.props.owner} />
      </div>
     );
  }
 };

 AppoModal.propTypes = {
    owner: PropTypes.string.isRequired
 };
 AppoModal.defaultProps = {
    owner: 'incorrect initial props owner'
 };

 function mapStateToProps(state) {
  return {
     owner: state.rootReducer.appointments_rdcer.owner
  }
 }
 export default connect(mapStateToProps)(AppoModal); // binding React-Redux

my actions.js file：

 export function fetchAppos(appo_id=0) {
  return function (dispatch) {
    console.log('fecthAppos Action appo_id >>>>>' + appo_id);
    let data = {
      method: 'POST',
      credentials: 'same-origin',
      mode: 'same-origin',
      body: JSON.stringify({
       appoid: appo_id
      }),
      headers: {
       'Accept':       'application/json',
       'Content-Type': 'application/json',
       'X-CSRFToken':  cookie.load('csrftoken')
      }
    }
    return fetch('/appointments/get_appos', data)
       .then(response => response.json())  // promise
       .then(json = dispatch(receiveAppo(json)) )
    } 
   };
   // after fetchAppos, the API Ajax call
   function receiveAppo(appoArrayProp) {
     return {
       type:  GET_ONE_APPO,
       appoArrayProp: appoArrayProp.shift()
    }
  }

减速机案例：

case RECEIVE_ONE_APPO:
  return Object.assign({}, state, {
    owner:  action.appoArrayProp.owner
  });

错误的结果（应该是＆＃34; Grimms＆＃34;）：

所以我定义了＃34; this.props.owner＆＃34;作为＆＃39;不正确的初始道具所有者＆＃39;但是，据我所知， componentDidMount 应该在加载整个DOM之后执行然后触发：

this.props.dispatch(action)

然后减速器应该设置＆＃34; Grimms＆＃34;作为this.props.owner的值，但这绝不会发生。我看到＆＃34; Grimms＆＃34;作为reducer中的所有者值，所以我不理解为什么this.props.owner永远不会更新。

Answer 1

在你的render（）函数中：

 render() {
    return (
      <div>
        <input name="owner" defaultValue={this.props.owner} />
      </div>
     );
  }

你使用defaultValue，它只用于设置初始渲染的值（在你的情况下是你指定的defaultProps）。要更新输入值，您必须使用受控<input>组件。

只需提供值道具，您的<input>组件就会成为受控组件。因此，定义像这样的组件应该有效：

 render() {
    return (
      <div>
        <input name="owner" value={this.props.owner} />
      </div>
     );
  }

有关受控组件和非受控组件的详细信息，请参阅https://facebook.github.io/react/docs/forms.html。

了解Redux生命周期，（初始ajax负载不起作用）

1 个答案: