왜 재설정 반응한다/재 렌더링 나는 다음과 같은 형태의 한 형태

Question

을 : 다음 코드 (return {...state, status: action.msg}가) 사업부를 업데이트 state를 업데이트 dispatch에 의해 API 요청 내부

import React from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import {apiUpdateUser} from '../../redux/actions/user'; 

class EditUser extends React.Component { 

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

    onSubmit(e) { 
    e.preventDefault(); 
    this.props.apiUpdateUser('/users_api/users/edit-user', this.state, true); 
    }; 

    onChange(e) { 
    const target = e.target; 
    const value = target.type === 'checkbox' ? target.checked : target.value; 
    const name = target.name; 
    this.setState({[name]: value}); 
    }; 

    render() { 
    const btnText = 'Submit' 
    return (
     <div> 
     <h2>Edit My Details</h2> 
     <form onSubmit={this.onSubmit}> 
      <div> 
      <label htmlFor="inputEmail" className="sr-only">Email</label> 
      <input 
       type="email" 
       name="username" 
       id="inputEmail" 
       placeholder="Email address" 
       onChange={this.onChange} 
       required 
       autoFocus 
      /> 
      </div> 

      <div> 
      <label htmlFor="inputName" className="sr-only">Name</label> 
      <input 
       type="text" 
       name="name" 
       id="inputName" 
       placeholder="Users First Name" 
       onChange={this.onChange} 
       autoFocus 
      /> 
      </div> 

      <div> 
      <label htmlFor="pw-new" className="sr-only">New Password</label> 
      <input 
      type="password" 
      name="passwordNew" 
      id="pw-new" 
      placeholder="Password" 
      onChange={this.onChange} 
      /> 
      </div> 

      <div> 
      <label htmlFor="pw-confirm" className="sr-only">Password Confirmation</label> 
      <input 
      type="password" 
      name="passwordConfirm" 
      id="pw-confirm" 
      placeholder="Password Confirmation" 
      onChange={this.onChange} 
      /> 
      </div> 

      <div> 
      <br /> 
      <label htmlFor="password" className="sr-only">Current Password</label> 
      <input 
      type="password" 
      name="password" 
      id="password" 
      placeholder="Current Password" 
      onChange={this.onChange} 
      required 
      /> 
      </div> 

      <button type="submit" disabled={this.props.status === 'updating...'}>{btnText}</button> 
     </form> 
     <div>{this.props.status}</div> 
     </div> 
    ) 
    }; 
}; 



const mapStateToProps = (state) => { 
    return { 
    status: state.user.status 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({apiUpdateUser}, dispatch); 
}; 

export default connect(
    mapStateToProps, 
    mapDispatchToProps 
)(EditUser); 

일단 제출라고 오류 메시지가 표시됩니다. 만약 내가 여기에 수정되지 않은 state 반환하면 양식이 예상대로 다시 렌더링되지 않습니다. 왜 나를 잃어 버리는 이유는 전체 컴포넌트가 this.props.status과 함께 div가 아닌 re-rendering이되는 이유입니다.

내가하려고하는 것은 오류가 있고 status이 업데이트되면 구성 요소/양식이 다시 렌더링되지 못하게하려는 것입니다. status은 state의 일부이기 때문에 status 부분이 state 인 경우 감속기가 변경되어 status div 대신 전체 form이 다시 렌더링됩니다.

을 form과 status div에 추가하려고 시도했습니다. 나는 status div을 별도의 구성 요소로 만들고 status을 props으로 전달하려고 시도했습니다. 나는 shouldComponentUpdate을 시도하고 이것을 방지하기 위해 할 수 있었던 유일한 것은 상태의 상태를 업데이트하지 않는 것입니다.

어떻게 상태를 업데이트 할 때 양식이 다시 렌더링되지 않도록 할 수 있습니까? redux-thunk를 사용하고 잘못 반응합니까? 작품으로

주 주위, 난, 생성자에 this.state = {status: ''}을 추가 약속에 apiUpdateUser을 변경하고 mapDispatchToProps에서 삭제. 약속 있음 해결 페이지의 상태를 업데이트하고 오류가없는 경우 다시 렌더링하면 오류가없는 경우 사용자가 업데이트하기 때문에 작업을 호출합니다. 나는 원래의 방법이 예상대로 작동하지 않는 이유를 잘 모르겠습니다.

Answer 1

전체 EditUser 구성 요소가 상태가 변경되면 전체 구성 요소가 다시 렌더링 될 때 Redux 상태에 가입합니다. 이것이 연결된 구성 요소의 작동 방식입니다. 전체 양식을 다시 렌더링하지 않으려면 제출 버튼과 div를 하나의 구성 요소에 단추 아래에 놓고 구성 요소를 상태 상태를 구독하는 연결된 구성 요소로 만들면됩니다. 어쨌든 다른 곳의 주.