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

Question

I am very beginner in react and i got stacked with a warning, I can not resolve them even i read a lot about it in the internet.

The warning is:

The App.tsx relevant code parts:

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

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

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

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

The menu is in the 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>
    )
}

They are semantic-ui-react elements. Anybody idea why do i get this warning?

Answer 1

This method is considered legacy, the alternative API is getDerivedStateFromProps .

Here's a sample of what the old method would look like:

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

  // ...
}

The new method works a bit differently:

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;
  }

  // ...
}