Question

我有这个组件在我的反应 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

0

Answer 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上的完整解决方案

Answer 2

只需将默认值为false的useState标记为

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

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

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

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

发表评论

评论列表（9条）

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

相关推荐

发表评论

评论列表（9条）