Не обновлять страницу профиля после обновления имени пользователя

Question

Я начинаю изучать React.Страница профиля не обновляется после изменения имени.Запрос обрабатывается, и я получаю желаемый результат, имя пользователя обновляется, но страница профиля не перезагружается, подскажите, пожалуйста, как это исправить.Дело в том, что у меня также есть похожая проблема на странице записей пользователя, и при добавлении записи возникает аналогичная ситуация, которая также появляется после перезагрузки страницы.Разве я не вызываю обновление компонента?

компонент:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import {users} from "../actions";


class ProfilePage extends Component {

state = {
    text: ""
};

submitName = (e) => {
    e.preventDefault();
    this.props.updateName(this.props.user.id, this.state.text).then(this.resetForm);
    this.setState({text: ""});
};

render() {
    return (
        <div>
            <div>
                <h3>{this.props.user.username}</h3>
                <span>Edit name</span>
                <form onSubmit={this.submitName}>
                  <input
                    value={this.state.text}
                    placeholder="Enter note here..."
                    onChange={(e) => this.setState({text: e.target.value})}
                    required />
                  <input type="submit" value="Save Name" />
                </form>
            </div>
            <p>{this.props.user.id}</p>
        </div>
    )
};
}

const mapStateToProps = state => {
return {
   user: state.auth.user,
}
};

const mapDispatchToProps = dispatch => {
return {
  updateName: (id, newname) => {
    return dispatch(users.updateName(id, newname));
  },
}
};

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

действие:

export const updateName = (userId, newname) => {
  return (dispatch, getState) => {

    let headers = {"Content-Type": "application/json", 'Access-Control-Allow-Origin': 'http://localhost:3000'};
    let {token} = getState().auth;

    if (token) {
       headers["Authorization"] = `Token ${token}`;
    }

    let body = JSON.stringify({"username":newname});

    return fetch(`/api/users/${userId}/`, {headers, method: "PUT", body})
    .then(res => {
    if (res.status < 500) {
      return res.json().then(data => {
        return {status: res.status, data};
      })
    } else {
      console.log("Server Error!");
      throw res;
    }
    })
    .then(res => {
    if (res.status === 200) {
      return dispatch({type: 'UPDATE_USERNAME', user: res.data, userId});
    } else if (res.status === 401 || res.status === 403) {
      dispatch({type: "AUTHENTICATION_ERROR", data: res.data});
      throw res.data;
    }
  })
 }
};

редуктор:

const initialState = [];
export default function users(state=initialState, action) {

  switch (action.type) {

    case 'FETCH_USER':
      return [...state, ...action.user];

    case 'UPDATE_USERNAME':
      return [...state, ...action.user];

    default:
     return state;
 }

}

Answer 1

В Redux вы обновляете реквизиты, и это не вызывает рендеринг страницы.Убедитесь, что вы изменили состояние после обновления реквизита, если вы не делаете это уже в функции resetForm.

this.props.updateName(this.props.user.id, this.state.text)
.then(()=>{this.resetForm(); this.setState({text: ""});
});

В качестве альтернативы вы можете использовать this.forceUpdate после обновления реквизита.Другой вариант - использовать функцию getDerivedStateFromProps.Это вызывается всякий раз, когда меняется реквизит.Если в этой функции возвращается изменение состояния, страница будет отображаться.