我想有条件地向数组中添加一个值. 这是状态和添加功能:

const [Selectors, setSelectors] = useState([]);
const SelectorAdd = (newValue) => {
   setSelectors((array) => [...array, newValue]);
}

我只想在这个just条件下给数组Selectors添加一个任意值:

{Yes ?
   <>
      <AnyComponent />
      {SelectorAdd('text value')} <=== this
   </>
: null}

但我有个错误:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

你能告诉我我在哪里犯了这个错误吗?

谢谢你!

推荐答案

每次你运行SelectorAdd时,你改变了组件的状态,因此重新渲染组件,运行SelectorAdd会重新渲染组件.你必须把逻辑从JSX中分离出来. 例如,将其传递给组件中其他地方定义的函数.

Reactjs相关问答推荐

从另一个组件更改组件中const的状态

如何在取数后添加新数据,并在页面上保存旧数据?

如何访问子集合中的文档?

有没有一种惯用的方式来接受特定的子元素?

获取更改后的状态值

Reaction-路由-DOM v6与v5

REACTION-Easy-SORT返回.map错误

在react上隐藏源映射

拖放 - 将排序保存到数组字段

每次状态更改时都会提交react 表单

Material UI @mui/material/Button vs @material-ui/core/Button,它什么时候改变的,旧版本的文档在哪里

React 应用程序可以嵌入到 PowerPoint 中吗?

useEffect 渲染没有依赖数组的组件

部署到github pages时请求路径错误

虽然通过了身份认证,但并没有导航到请求的页面

如何通过 React JS 中的映射将新元素添加到对象数据数组中

如何使用 React 在客户端获取 nestjs websocket 异常错误?

如何避免在 react useEffect 上滚动时出现小的延迟?

React Native - 身份验证 - 触发值以更改 Auth 和 UnAuth 堆栈导航器

警告:您在没有 `onChange` 处理程序的情况下为表单字段提供了 `value` 属性