在 ReactJs中设置组件内部的状态

我有这个组件在我的反应 js 应用程序:

我有这个组件在我的反应 js 应用程序:

import React, { useState } from "react";
import Select, { components, DropdownIndicatorProps } from "react-select";
import { ColourOption, colourOptions } from "./docs/data";
const Component = () => {
  const [state, setState] = useState();
  console.log(state);
  const DropdownIndicator = (props) => {
    const { menuIsOpen } = props.selectProps;
    setState(menuIsOpen);
    return (
      <components.DropdownIndicator {...props}>12</components.DropdownIndicator>
    );
  };
  return (
    <Select
      closeMenuOnSelect={false}
      components={{ DropdownIndicator }}
      defaultValue={[colourOptions[4], colourOptions[5]]}
      isMulti
      options={colourOptions}
    />
  );
};
export default Component;

在 DropDownIndicator 组件中,我设置状态:

const {
  menuIsOpen
} = props.selectProps;
setState(menuIsOpen);

在那个地方设置状态,我得到下一个警告:Warning: Cannot update a component (Component) while rendering a different component (DropdownIndicator). To locate the bad setState() call inside DropdownIndicator
问题:我如何修复此警告并使其消失?
演示:https://codesandbox.io/s/codesandboxer-example-forked-97sx0?file=/example.tsx:0-724

1

您应该在useEffect中调用setState

const DropdownIndicator = (props) => {
    const { menuIsOpen } = props.selectProps;
    useEffect(() => {
        setState(menuIsOpen);
      });
    return (
      <components.DropdownIndicator {...props}>12</components.DropdownIndicator>
    );
  };

useEffect做什么?通过使用此 Hook,您告诉 React 您的组件在渲染后需要执行某些操作。Read more关于 useEffect

如果您的setState依赖于menuIsOpen,则作为依赖项传递给useEffect

 const DropdownIndicator = (props) => {
    const { menuIsOpen } = props.selectProps;
      useEffect(() => {
        setState(menuIsOpen);
      },[menuIsOpen]);
    return (
      <components.DropdownIndicator {...props}>12</components.DropdownIndicator>
    );
  };

CodeSandbox上的完整解决方案

0

只需将默认值为falseuseState标记为

const [state, setState] = useState(false);

看起来当你第一次做setState(menuIsOpen);时,它的值是undefinedDropdownIndicator尚未完成第一次渲染,

[假设] 根据 undefined / null 检查,根据堆栈跟踪,必须有一些带有 React.Component 的代码。但是当给定 initialState 时,错误不会发生。

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(966)
大引号
上一篇
MATLAB中的反向谱图ALa AphexTwin
下一篇

相关推荐

  • Nero 8:是否可以将ReactJS与SQLite数据库连接

    关于Nero 8的问题,在il corsaro nero link中经常遇到,是否可以在没有任何 node.js 或 express 的情况下将 React JS 与 SQLite 数据库连接?如果是,请给我一个例子或提供一些资源链接。…

    2022-12-09 04:25:53
    0 56 13
  • cvt和自动挡哪个好提升驾驶体验的最佳选择

    CVT(可变转换器)是一种由传动带及传动轮组成的无级变速器,它可以在没有传动档位的情况下,根据驾驶者的驾驶习惯,自动调整传动轮之间的转速比,从而实现无级变速。自动挡是指车辆自动变速箱,它使用液力传动来实现变速,可以自动适应车辆的行驶状态,减少司机的疲劳,提高行车的舒适性。…

    2023-06-08 07:42:19
    0 67 12
  • cv一叶扁舟和清影轩阳:漫游在一叶扁舟和清影轩阳之间

    cv一叶扁舟是一款开源的计算机视觉库,用于图像处理、计算机视觉等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。清影轩阳是一款开源的计算机视觉框架,用于图像处理、目标检测、分类等。它提供了丰富的API,可以帮助开发者快速实现各种图像处理任务,如图像分割、目标检测、图像识别等。…

    2023-08-05 07:06:20
    0 24 85
  • css设置滚动条宽度设置:This is a title

    CSS设置滚动条宽度的方法:使用CSS3的。-webkit-属性:…

    2023-06-06 10:53:01
    0 55 55
  • xl和xe汽车cvt:探索XL和XE汽车的CVT技术优势

    XL和XE汽车CVT是一种变速器,它使用液力变矩器代替传统的机械变速器,以达到更高的效率。它的工作原理是,当发动机输出功率时,液力变矩器就会将这些功率转换为液压能量,然后将能量传递到变速器的输出轴上,从而实现变速。…

    2023-04-09 00:41:04
    0 53 67
  • cordon bleu是什么意思:法式炸鸡卷——Cordon Bleu的经典之作

    Cordon Bleu是一种烹饪技术,其中肉片被置于奶酪和火腿之间,然后用面包屑裹上,最后煎炸或烤熟。这种技术通常用于制作鸡肉,但也可以用于制作其他类型的肉类,如牛肉或猪肉。…

    2024-01-27 15:13:30
    0 76 24
  • countif 非空:非空单元格的计数

    Countif 非空是指计算某个单元格不为空的数量。代码如下:…

    2023-04-22 15:54:15
    0 85 79
  • java double保留一位小数:How to Round a Double to One Decimal Place in

    示例示例使用类可以轻松实现java double保留一位小数的功能,具体代码如下:// 创建对象…

    2023-05-14 07:40:03
    0 74 93

发表评论

登录 后才能评论

评论列表(2条)