时间戳

首页 > 解决方案 > Reactjs子组件在props中设置父级提供的状态数组时进入无限循环

javascript - Reactjs子组件在props中设置父级提供的状态数组时进入无限循环

问题描述

父元素从服务器获取数组并在道具中提供子元素以显示数组（票）。

父元素

    render() {
        return (
            <div style={outerBoundary}>
                <ShowArray tickets={this.state.tickets}/>
            </div>
        )
    }

子元素

 render() {
    const { classes } = this.props;
    var tablePadding = {
      'padding':'1em',
    }
    this.setState({
      tickets:this.props.tickets,
    });
    return (
      <div>
        <Paper className={classes.root} style={tablePadding}>
          <Typography variant="title" id="tableTitle">
            Array Elements
          </Typography>
          {this.state.tickets && this.state.tickets.length > 0 && this.state.tickets.map((n, index) => {
            console.log(n, index)
            return (
                <TableRow> n.id </TableRow>
            );
          })}
     )
 }

我面临的问题是我使用道具值在子元素中设置的票证状态进入无限循环。

this.setState({
  tickets:this.props.tickets,
});

显示错误信息

错误信息

标签： javascriptreactjs

解决方案

你不能setState在你的render函数内部调用

this.setState({
  tickets:this.props.tickets,
});

由于该setState函数导致重新渲染，因此在下一次渲染时您将setState再次调用并且您将需要再次重新渲染，这就是您拥有循环的原因

推荐阅读