Как реализовать такой метод getDerivedStateFromProps с помощью хуков?

Question

Я пытаюсь переписать один компонент класса с помощью метода getDerivedStateFromProps с зацепками. Но я не уверен, как реализовать эту логику getDerivedStateFromProps c. Можно ли использовать ловушку useEffect для этого?

static getDerivedStateFromProps(
    { editMode, page },
    { horizontal, vertical },
  ) {
    if (
      editMode &&
      page &&
      horizontal === undefined &&
      vertical === undefined
    ) {
      return {
        horizontal: page.content || '<div />',
        vertical: page.content_vertical || '<div />',
        orientation: 'horizontal',
      };
    } else if (
      !editMode &&
      horizontal === undefined &&
      vertical === undefined
    ) {
      return {
        horizontal: '<div/>',
        vertical: '<div/>',
        orientation: 'horizontal',
      };
    }
    return null;
  }

Я пытался сделать так

  const = ({ page, editMode }) => {

    const [horizontal, setHorizontal] = useState(null);
    const [vertical, setVertical] = useState(null);
    const [orientation, setOrientation] = useState(null);
    useEffect(
      () => {
        if (
          editMode &&
          page &&
          horizontal === undefined &&
          vertical === undefined &&
  ) {
          setHorizontal(page.content || '<div />');
          setVertical(page.content_vertical || '<div />');
          setOrientation('horizontal');
        } else if (
          !editMode &&
          page &&
          horizontal === undefined &&
          vertical === undefined &&
  ) {
          setHorizontal('<div />');
          setVertical('<div />');
          setOrientation('horizontal');
        }
      },
      [editMode, page, horizontal, vertical],
    );

  }

Также я хотел бы знать, как переписать такие фрагменты кода, я имею в виду [this.state.orientation]: значение

 onUpdatePageContent = value => {
    this.setState({ [this.state.orientation]: value });
  };

и это мой компонент, что это за состояние. [] Синтаксис ??

<MyPageEditor
  editorRef={this.myRef}
  value={this.state[orientation]} // especially this line,
  onChange={this.onUpdatePageContent}
/>

Answer 1

Я думаю, что вы не должны использовать в этой ситуации реагировать крючки. Из-за того, что у вас есть чистая функция, и это потрясающе, нужно использовать ловушки реагирования, если вы хотите выполнить какое-то действие, как жизненный цикл реагировать на компонент componentDidMount.

возможно, я не понял эту проблему (this.state.orientation]: value ) но я думаю, что вы можете использовать setState ({ориентация: значение}) (значение, возможно, «горизонтальное и вертикальное»), почему хранится значение в другом поле, если эти значения относятся к одному индикатору (ориентация)

const useSomeLogin = ({ page, editMode }) => {
    const [horizontal, setHorizontal] = useState(undefined);
    const [vertical, setVertical] = useState(undefined);
    const [orientation, setOrientation] = useState(null);
    useEffect(
      () => {
        if (
          editMode &&
          page &&
          horizontal === undefined &&
          vertical === undefined &&
  ) {
          setHorizontal(page.content || '<div />');
          setVertical(page.content_vertical || '<div />');
          setOrientation('horizontal');
        } else if (
          !editMode &&
          page &&
          horizontal === undefined &&
          vertical === undefined &&
  ) {
          setHorizontal('<div />');
          setVertical('<div />');
          setOrientation('horizontal');
        }
      },
      [editMode, page, horizontal, vertical],
    );
    // you should return values and function for changes state of data
    return { 
      horizontal,
      setHorizontal
      vertical,
      setVertical,
      orientation,
      setOrientation,
      // etc ...
    };

  }

// ------- useage


const { horizontal,
      setHorizontal
      vertical,
      setVertical,
      orientation,
      setOrientation } = useSomeLogin({page, editMode});

const onClick = () => setVertical('new value');

I надеюсь, что я помог, мне трудно помочь, так как я не совсем понял, чего ты собираешься достичь. без кода это сложно