javascript-React组件更新子组件

我有一个React组件(相册),该组件的render()方法根据其状态返回两个可能的组件之一.这些组件之一(AlbumsTable)通过两个道具参数(类和专辑)被调用.第二个props参数是ajax使用Axios在更新专辑状态(导致其重新呈现)的方法(getData)中获得的数组.

由于Ajax的异步特性,专辑会渲染两次,第一次使用this.albums = [],第二次使用this.albums渲染(等于getData()状态更新),其this.albums等于ajax的结果.

问题是,当this.albums等于[]时,我可以追踪到AlbumsTable.constructor()仅被调用一次(专辑首次呈现).因此,相册第二次渲染时,当this.albums等于ajax的结果时,该内容不会作为props发送到AlbumsTable,导致ajax的结果永远不会显示.

这是我组件的代码：

import React, { Component } from 'react';
import Cookies from 'js-cookie';
import axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

class AlbumsTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: props.classes,
    }

    if(props.albums === undefined){
      this.albums = [];
    } else {
      this.albums = props.albums;
    }

  }

  render() {
    return (
      <Paper className={this.state.classes.root}>
        <Table className={this.state.classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell align="right">Name</TableCell>
              <TableCell align="right">Photos</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.albums.map(album => {
              return (
                <TableRow key={album.id}>
                  <TableCell component="th" scope="row">
                    {album.name}
                  </TableCell>
                  <TableCell align="right">{"photos"}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}

class AlbumDetail extends Component {
  render() {
    return(<p>Album Detail Comming Soon...</p>);
  }
}

class Albums extends Component {
  constructor(props) {
    super(props);

    this.state = {
      classes: props.classes,
      mode: 'table',
      albums: [],
    };
    this.albums = [];
    this.getData();
  }

  getData() {
      const axios = require('axios');
      var userToken = Cookies.get('token');
      axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
      axios.defaults.xsrfCookieName = "csrftoken";
      axios.get('http://127.0.0.1:8000/es/api/albums/',
        {
          headers: {
            Authorization: userToken,
          }
        }
      )
      .then(function (response) {
        console.log(response);
        this.albums = response.data.results;
        this.setState({albums: this.state.albums + 1});
      }.bind(this))
      .catch(function (error) {
        console.log(error);
        return(null);
      })
    }

  setData(albums) {
    this.setState({albums: albums});
  }

  render() {  
    if(this.state.mode === 'table'){
      return (<AlbumsTable classes={this.state.classes} albums={this.albums} />);
    } else {
      return (<AlbumDetail />);
    }

  }
}

Albums.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Albums);

我想我缺少或误解了有关组件渲染的某些东西.

解决方法:

如果您认为问题更好,您可以意识到您不需要将Albums数组作为变量保存到类组件中,那么最好检查一下是否定义了albums属性,否则应返回一个空数组组件将按预期方式工作的方式.

render(){
    const albums = this.props.albums || [];
    return (
       <Paper className={this.state.classes.root}>
        <Table className={this.state.classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell align="right">Name</TableCell>
              <TableCell align="right">Photos</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {albums.map(album => {
              return (
                <TableRow key={album.id}>
                  <TableCell component="th" scope="row">
                    {album.name}
                  </TableCell>
                  <TableCell align="right">{"photos"}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }

标签：reactjs,material-ui,javascript
来源： https://codeday.me/bug/20191024/1923426.html