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

Question

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

我想做什么：在 Ajax 调用后在表单字段中加载 "owner" 值。

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

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

减速机案例：

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

错误的结果（应该是"Grimms"）：

所以我将"this.props.owner"定义为'incorrect initial props owner'，但据我了解，componentDidMount应该在after[=42]执行=]整个DOM被加载然后触发：

this.props.dispatch(action)

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

Answer 1

在您的 render() 函数中：

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

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

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

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

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

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

Understanding Redux life cycle, (initial ajax load doesn't work)

javascript

reactjs

react-router

redux