Предупреждение об использовании UNSAFE_componentWillReceiveProps в строгом режиме - PullRequest
Новая
       10

Предупреждение об использовании UNSAFE_componentWillReceiveProps в строгом режиме

0 голосов
/ 20 апреля 2020

Я очень новичок в реакции, и я получил предупреждение, я не могу их решить, даже прочитав много об этом в inte rnet.

Предупреждение:

enter image description here

Соответствующие части кода 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>
    )
}

Это семантические c -и-реагирующие элементы. Кто-нибудь знает, почему я получаю это предупреждение?

1 Ответ

0 голосов
/ 20 апреля 2020

Этот метод считается устаревшим, альтернативный 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;
  }

  // ...
}
...