在 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 时,错误不会发生。

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

(9)
如何将inset应用于tailwindcss中的框阴影
上一篇
MATLAB中的反向谱图ALa AphexTwin
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(28条)