javascript - CRUD操作后Reactjs重新渲染组件

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 工具栏中更新我的用户积分的按钮后更改渲染有任何建议，我将非常感激!

干杯，圣诞快乐!

马丁

EDIT

这是我的子组件与工具栏的渲染:

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 内执行此操作。

除此之外，通过您提供的组件(组合)层次结构的示例很难判断。

无论如何，如果您的子组件必须更新父组件，您必须将一个方法作为 prop 从父组件传递给子组件，并通过调用将子组件中加载的数据传递给父组件你传递的同一个 Prop 。

如果您必须更新最初从中获取数据的同一组件，只需在获取数据后调用 this.setState 即可。

如果您必须更新父级:

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

如果在同一个组件中

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