在嚴格模式下使用 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;
  }

  // ...
}