javascript - 了解Redux生命周期，(初始ajax加载不起作用)

Question

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

我想要做什么:在 Ajax 调用后在表单字段中加载“所有者”值。

问题是:“componentDidMount()”函数不会更新this.props.owner。 “所有者”值位于模态对话框内，当您在前一个组件的行列表中单击“编辑”时，该对话框会出现，第二次单击后一切正常，但在第一次加载时则不然。

我的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

我的 actions.js 文件:

 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()
    }
  }

reducer 案例:

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

错误结果(应该是“Grimms”):

所以我将“this.props.owner”定义为“不正确的初始 Prop 所有者”，但据我所知，componentDidMount应该在整个DOM之后执行加载后触发:

this.props.dispatch(action)

然后reducer应该将“Grimms”设置为this.props.owner的值，但这永远不会发生。我将“Grimms”视为 reducer 中的所有者值，所以我不明白为什么 this.props.owner 从未更新。

Answer 1

在你的 render() 函数中:

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

您使用defaultValue，它仅用于设置初始渲染的值(在您的情况下与您指定的defaultProps一起使用)。要更新输入的值，您必须使用受控的 <input>组件。

您的<input>只需提供 value 属性即可使组件成为受控组件。因此，像这样定义你的组件应该有效:

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

参见https://facebook.github.io/react/docs/forms.html有关受控和非受控组件的更多信息。