Reactjs 子組件在設置時進入無限循環 state 父組件在 props 中提供的數組

Question

父元素從服務器獲取數組並在 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>
            );
          })}
     )
 }

我面臨的問題是票 state，我使用道具的值在子元素中設置進入無限循環。

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

Answer 1

您不能在render函數中調用setState

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

由於setState函數導致重新渲染，因此在下一次渲染時，您將再次調用setState ，並且您需要再次重新渲染，因此這就是循環的原因

Answer 2

不要在渲染中設置狀態。 您可以改為映射道具：

render() {
    const { classes } = this.props;
    var tablePadding = {
      'padding':'1em',
    }

    return (
      <div>
        <Paper className={classes.root} style={tablePadding}>
          <Typography variant="title" id="tableTitle">
            Array Elements
          </Typography>
          {this.props.tickets.map((n, index) => {
            console.log(n, index)
            return (
                <TableRow> n.id </TableRow>
            );
          })}
     )
 }

Answer 3

請從子級的render方法中刪除this.setState，然后在子級組件中嘗試以下操作，

static getDerivedStateFromProps(nextProps, prevState) {
   if(nextProps.tickets){
      return {
         tickets: tickets
      }
   }
}

在子組件的渲染中，

render() {
    const { classes } = this.props;
    const { tickets } = this.state;
    var tablePadding = {
      'padding':'1em',
  .
  .
  .
  .
}

嘗試這個...

Answer 4

為了擴展其他人所說的內容，您在render方法中使用setState 。

看來您正在使用props更改state

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

在您的代碼中，您不需要這樣做，可以使用this.props. 直接代替this.state.tickets中的jsx 。

但是，如果您需要根據道具更新狀態，則應使用getDerivedStateFromProps

這樣，您可以編寫這樣的static方法

static getDerivedStateFromProps(props) {
    return {
        tickets: props.tickets
    }
}

getDerivedStateFromProps的返回值用於更新狀態。 在這種情況下，將使用props.tickets的值更新state為tickets鍵。

Answer 5

為避免無限循環，請調用useEffect並將[this.props.tickets]作為第二個參數傳入。

第一個參數中的 lambda 將僅在this.props.tickets更改值時調用，限制 state 更新的次數。