在严格模式下使用 UNSAFE_componentWillReceiveProps 的反应警告

Question

我是反应的初学者，我收到了警告，即使我在互联网上阅读了很多关于它的内容，我也无法解决它们。

警告是：

App.tsx 相关代码部分：

  const [selectedMoment, setSelectedMoment] = useState<IMoment | null>(null);

  const [editMode, setEditMode] = useState(false);

  const handleOpenCreateForm = () => {
      setSelectedMoment(null);
      setEditMode(true);
  }

  return (
    <Fragment>
      <NavBar openCreateForm={handleOpenCreateForm} />
    </Fragment>);

菜单位于 NavBar.tsx 中：

interface IProps {
    openCreateForm: () => void;
}

export const NavBar: React.FC<IProps> = ({ openCreateForm }) => {
    return (
        <Menu fixed='top' inverted>
            <Container>

                <Menu.Item>
                    <Button positive content="Moment upload" onClick={openCreateForm} />
                </Menu.Item>

            </Container>
        </Menu>
    )
}

它们是语义-ui-react 元素。 有人知道为什么我会收到此警告吗？

Answer 1

此方法被认为是旧方法，替代 API 是getDerivedStateFromProps 。

这是旧方法的示例：

class List extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.selected !== this.props.selected) {
      this.setState({ selected: nextProps.selected });
      this.selectNew();
    }
  }

  // ...
}

新方法的工作方式有点不同：

class List extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.selected !== state.selected) {
      return {
        selected: props.selected,
      };
    }

    // Return null if the state hasn't changed
    return null;
  }

  // ...
}