Реакт 16.3 метод getDerivedStateFromProps делает форму не редактируемой - PullRequest
Новая
       27

Реакт 16.3 метод getDerivedStateFromProps делает форму не редактируемой

0 голосов
/ 19 октября 2018

У меня есть простое приложение React Redux CRUD, которое прекрасно работает при редактировании записи с формой при использовании метода жизненного цикла componentWillReceiveProps.Недавно хотел заменить его методом componentWillReceiveProps, который работал нормально, то есть форма редактирования действительно вытащила нам данные из поста, который нужно отредактировать, но теперь форма недоступна для редактирования.Больше ничего не могу записать в форму.Вот предыдущий код, который работал: 

state = {
  id: '',
  title: '',
  body: '',
  errors: {},
};
componentWillReceiveProps(nextProps, nextState) {
const { id, title, body } = nextProps.post;
console.log(`Next Props in Will Receive Props: ${nextProps.post.title}`);

this.setState({
  id,
  title,
  body,
});

}

Этот код я пытаюсь заменить приведенным выше кодом: 

static getDerivedStateFromProps(nextProps, prevState) {
const { id, title, body } = nextProps.post;
if (nextProps.post !== prevState.post) {
  return {
    id,
    title,
    body,
  };
}

return null;

}

А вот код формы: 

  render() {
const { id, title, body, errors } = this.state;

return (
  <div className="add-post-from-container animated slideInLeft pt-5">
    <div className="card mb-3">
      <div className="card-header text-danger">
        <strong>Edit Post</strong>
      </div>
      <div className="card-body">
        <h5>Article ID: {id}</h5>
        <form onSubmit={this.onSubmit.bind(this)}>
          <div className="">
            <InputGroup
              name="title"
              type="text"
              placeholder="Enter Post Title"
              value={title}
              onChange={this.onChange}
              error={errors.title}
            />

            <div className="row">
              <div className="col-md-12">
                <InputTextarea
                  name="body"
                  value={body}
                  onChange={this.onChange}
                  error={errors.body}
                  placeholder="Enter Content"
                />
              </div>
            </div>
            <div className="mx-auto">
              <input
                type="submit"
                className="form-control form-control-lg btn btn-light mt-2"
                value="Update Post"
              />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
);

Пожалуйста, помогите мне понять, в чем я здесь ошибаюсь.Я довольно новичок в React / Redux.

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

Спасибо Савану за ваш ответ, но оказывается, что getDerivedStateFromProps не был методом, который мне был нужен для замены componentWillReceiveProps.Что мне было нужно, это componentDidUpdate.Вот новый код, который я публикую для других потерянных душ, таких как я ... Я оставляю код, который был заменен, закомментированным ... надеюсь, это кому-нибудь поможет: 

export class EditPost extends Component {
 static propTypes = {
 post: PropTypes.object.isRequired,
 editPost: PropTypes.func.isRequired,
 getPost: PropTypes.func.isRequired,
};



state = {
    id: '',
    title: '',
    body: '',
    errors: {},
  };
  // THE FOLLOWING WAS REPLACED
  // componentWillReceiveProps(nextProps, nextState) {
  //   const { id, title, body } = nextProps.post;
  //   console.log(`Next Props in Will Receive Props: ${nextProps.post.title}`);

  //   this.setState({
  //     id,
  //     title,
  //     body,
  //   });
  // }

  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.getPost(id);
  }

  // THE FOLLOWING WAS USED TO REPLACE THE ABOVE COMMENTED OUT CODE
  componentDidUpdate(props, state, snapshot) {
    if (this.props.post !== props.post) {
      this.setState(this.props.post);
    }
  }
0 голосов
/ 19 октября 2018

Вам необходимо изменить код метода getDerivedStateFromProps, как показано ниже: 

   static getDerivedStateFromProps(nextProps, prevState) {
       const { id, title, body } = nextProps.post;
       if (JSON.stringify(nextProps.post) !== JSON.stringify(prevState.post)) {
          return {
              id,
              title,
              body,
          };
       }

    return null;
 }

Примечание. Я думаю, что вы не сохраняете сообщение в состоянии, поэтому приведенный выше код не будет работать.Вам нужно хранить сообщение в состоянии.

Лично я думаю, что если идентификатор записи уникален, то лучше сравнивать идентификаторы, а не весь объект.Пример кода показан ниже: 

  static getDerivedStateFromProps(nextProps, prevState) {
     const { id, title, body } = nextProps.post;
     if (nextProps.post.id !== prevState.id) {
       return {
         id,
         title,
         body,
       };
     }

return null;
}
...