Question

像这样的简单代码段会导致无限循环。如果这种方法显然行不通，我该如何使用道具来决定是否应更新状态？

import React from "react";

export default function Igor_test(props) {

  const { update_name } = props;
  const [values, setValues] = React.useState({
    name: 'Joe',
    age: 15,
  });

  if (update_name) {
    setValues(oldValues =>({
      ...oldValues,
      [values.name]: 'Pat',
    }))
  }

  return(
    <div>
      <p>
        {values.name}
      </p>
    </div>
  )

}

错误：重新渲染次数过多。 React将渲染数量限制为防止无限循环。

Answer 1

该错误是由于您的fig = figure(plot_height=400, plot_width=600, x_axis_label=' Store Average Age of Respondent', y_axis_label=' Store NPS Percentage Score %', title='MNWIOM Average Customer Age Vs. NPS Percentage Score by Store', toolbar_location='below', tools=[HoverTool(tooltips=[('Store','@Store Name'),('Average Customer Age', '@Average Age of Respondent'),('NPS Score %', '@NPS Percentage Score')])])条件造成的，

if

这里if (update_name) { setValues(oldValues =>({ ...oldValues, [values.name]: 'Pat', })) }条件处于设置状态，然后重新渲染组件。重新渲染组件时，它将再次检查if条件并找到if的值，并再次设置状态，依此类推...

这会导致无限循环。

您的update_name中还有一个问题，您正在尝试设置setValues，这是错误的，应该只是[values.name]。

您需要的是带有依赖项数组的name挂钩，它将跟踪提供的参数并在该参数更改时做出反应。

现在useEffect发生变化时，它将检查它是否具有值并相应地设置状态。

update_name

Answer 2

您可以将所有逻辑放在useEffect hook中，以控制何时更新状态请注意，每次update_name更改时，此功能将会 重新显示。

React.useEffect( () => {
    setValues(oldValues =>({
      ...oldValues,
      name: 'Pat',
    }))
},[update_name]);

反应useState无限重渲染

2 个答案: