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

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

javascript reactjs

Javascript Reactjs子组件在设置props中父组件提供的状态数组时进入无限循环,javascript,reactjs,Javascript,Reactjs,父元素从服务器获取数组，并在道具中提供子元素以显示数组（票证）父元素您不能在渲染函数中调用设置状态 this.setState({ tickets:this.props.tickets, }); 由于setState函数正在导致重新渲染，因此在下一次渲染时，您将再次调用setState，并且您需要再次重新渲染，这就是为什么在render函数中有循环setState this.setState({ tickets:this.props.tickets, }); 由于setStat

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

父元素

您不能在

渲染

函数中调用

设置状态

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

由于

setState

函数正在导致重新渲染，因此在下一次渲染时，您将再次调用

setState

，并且您需要再次重新渲染，这就是为什么在

render

函数中有循环

setState

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

由于

setState

函数会导致重新渲染，因此在下一次渲染时，您将再次调用

setState

，并且需要再次重新渲染，这就是为什么在渲染中有循环不设置状态。您可以改为映射道具：

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>
            );
          })}
     )
 }

render（）{
const{classes}=this.props；
var表格填充={
“padding”：“1em”，
}
返回(
数组元素
{this.props.tickets.map（（n，索引）=>{
console.log（n，索引）
返回(
n、 身份证
);
})}
)
}

不要在渲染中设置状态。您可以改为映射道具：

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>
            );
          })}
     )
 }

render（）{
const{classes}=this.props；
var表格填充={
“padding”：“1em”，
}
返回(
数组元素
{this.props.tickets.map（（n，索引）=>{
console.log（n，索引）
返回(
n、 身份证
);
})}
)
}

请从子组件的渲染方法中删除此.setState，然后在子组件中尝试以下操作

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

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

在子组件的渲染中

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

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

尝试此…

请从子组件的渲染方法中删除此.setState，然后在子组件中尝试以下操作

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

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

在子组件的渲染中

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

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

尝试此…

要扩展其他人所说的内容，您正在

渲染方法中使用设置状态

似乎您正在使用道具更改状态

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

在代码中，您不需要这样做，您可以直接使用this.props.
而不是jsx中的this.state.tickets

但是，如果您需要根据道具更新您的状态，您应该使用
有了它，您可以编写这样的static
方法
static getDerivedStateFromProps(props) {
    return {
        tickets: props.tickets
    }
}

getDerivedStateFromProps
的返回值用于更新状态。在这种情况下，状态中的tickets
键将使用道具的值进行更新。tickets
要扩展其他人所说的内容，请在渲染方法中使用setState

似乎您正在使用道具更改状态

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

在代码中，您不需要这样做，您可以直接使用this.props.
而不是jsx中的this.state.tickets

但是，如果您需要根据道具更新您的状态，您应该使用
有了它，您可以编写这样的static
方法
static getDerivedStateFromProps(props) {
    return {
        tickets: props.tickets
    }
}

getDerivedStateFromProps
的返回值用于更新状态。在这种情况下，state
中的tickets
键将更新为props.tickets
为什么在render（）函数中使用setState我在jsx中直接对数组使用了this.props.tickets.map，但这也进入了无限循环。我没有得到错误，但我的控制台在循环中填充了无限日志为什么在render（）函数中使用setState我在jsx中直接对数组使用this.props.tickets.map，但这也进入了无限循环。我没有得到错误，但我的控制台在Loop中被无限日志填充。我用console.log（this.props）替换了this.setState（{tickets:this.props.tickets，}），并直接在数组中使用this.props.tickets.map。现在除了console.log（）之外，我没有得到任何错误无限打印。为什么会再次调用我的渲染函数并再次使用请共享您的完整代码和您的新错误，以便我们能够解决它。我将此.setState（{tickets:this.props.tickets，}）替换为console.log（this.props）并在数组中直接使用this.props.tickets.map。现在我没有收到任何错误，只有console.log（）无限打印。为什么会再次调用我的渲染函数并再次使用请共享您的完整代码和您的新错误，以便我们能够解决它。我将此.setState（{tickets:this.props.tickets，}）替换为console.log（this.props）并在数组中直接使用this.props.tickets.map。现在我没有收到任何错误，只有console.log（）无限打印。为什么会再次调用我的渲染函数？您确定，父组件和子组件的渲染方法中都没有设置状态吗？请尝试将我上面给出的代码粘贴到您的子组件，并告诉我它是否工作。我将此.setState（{tickets:this.props.tickets，}）替换为console.log（this.props并在数组中直接使用this.props.tickets.map。现在我没有收到任何错误，只有console.log（）无限打印。为什么会再次调用我的渲染函数？您确定，父组件和子组件的渲染方法中都没有设置状态吗？请尝试将我上面给出的代码粘贴到您的子组件，并告诉我它是否工作。我将此.setState（{tickets:this.props.tickets，}）替换为console.log（this.props并在数组中直接使用this.props.tickets.map。现在我没有收到任何错误，只有console.log（）无限打印。为什么每次react
检测到阴影dom中的更改时，都会调用render
函数。鸟瞰react的工作方式，它会在内存中保留一个副本。进行更改时