Компонент рендеринга Reactjs после операции CRUD

Question

Я создаю вход в систему с MongoDB, так как моя база данных размещена на heroku.Я хочу изменить значение моего компонента после обновления свойства моего зарегистрированного пользователя в моей БД.

Это моя функция, которая обновляет «Кредиты» моего пользователя:

// ProgressMobileStepper.js

updateCredits() {
      fetch('https://mighty-pigeon-8369.herokuapp.com/users/5', {
      method: 'put',
      headers: {
        ...authHeader(),
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({credits: 20})
    }).then(res=>res.json())
      .then(res => console.log(res))


    }

Она запускается событием onClick кнопки в том же файле!

Вот мой компонент(другой файл), который должен перерисовать панель инструментов сразу после обновления кредитов моего пользователя:

// ItemViewAll.js

  <Toolbar style={{background: '#ffffff', color: '#000'}}>
          <IconButton
            color="inherit"
             onClick={this.handleClose}
             style={{outline: 'none'}}
          >
          <CloseIcon onClick={this.handleClose}/>
          </IconButton>


         {user && user.token &&
            <Button variant="outlined">
               {user.credits}
             </Button>

         }

        </Toolbar>

И здесьявляется json пользователя (не знаю, полезно ли):

// MongoDB

{
    "credits": 20,
    "_id": "5c13fd6008dd3400169867a5",
    "firstName": "Martin",
    "lastName": "Seubert",
    "username": "admin",
    "createdDate": "2018-12-14T18:58:40.295Z",
    "__v": 0,
    "id": "5c13fd6008dd3400169867a5"
}

Если у вас есть предложения по изменению рендера после нажатиякнопка для обновления кредитов моего пользователя на панели инструментов ItemViewAll.js, я был бы очень благодарен!

Приветствия и веселого Рождества!

Martin

РЕДАКТИРОВАТЬ

Это рендер моего дочернего компонента с панелью инструментов:

render() {

      const { classes } = this.props;
      let user = JSON.parse(localStorage.getItem('user'));
         return(
               ...
                 <Toolbar style={{background: '#ffffff', color: '#000'}}>
          <IconButton
            color="inherit"
             onClick={this.handleClose}
             style={{outline: 'none'}}
          >
          <CloseIcon onClick={this.handleClose}/>
          </IconButton>


         {user && user.token &&
            <Button variant="outlined">
               {user.credits}
             </Button>

         }

        </Toolbar>
           )
}

Answer 1

Если вам нужно загрузить какие-либо данные из API или подобного, вы должны сделать это внутри componentDidMount

Кроме того, очень трудно сказать по примеру, который вы предоставили иерархиюваши компоненты (состав).

Независимо от того, если ваш дочерний компонент должен обновить родительский компонент, вам нужно будет передать метод в качестве подпорки из родительского компонента в ваш дочерний компонент и передать данные, которые были загружены в ваш дочерний компонент, в ваш.parent, вызывая ту же опору, которую вы передали.

Если вам вообще нужно обновить тот же компонент, из которого вы извлекли данные, в первую очередь, просто вызовите this.setState после того, как данные были извлечены.

Если вам нужно обновить родительский элемент:

.then(res=>res.json())
.then(res => this.props.methodPassedFromParent(res))

Если он находится в том же компоненте

.then(res=>res.json())
.then(res => this.setState({ user: res })