Как я могу сохранить предыдущие реквизиты для использования в componentDidUpdate ()?

Question

import React, { Component } from "react";
import Sidebar from "../../components/Sidebar";
import API from "../../utils/API";
import PostContainer from "../../components/PostContainer"
import { withRouter } from 'react-router'
import "./index.css";

class Posts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      carMake: "",
      carModel: "",
      carYear: 0
    };
  }

  componentDidMount() {
    const { carMake, carModel, carYear } = this.props.match.params;
    if (carMake && carModel && carYear) {
      console.log("component mounted, calling loadPostsMakeModelYear");
      console.log(carMake, carModel, carYear);
      this.loadPostsMakeModelYear(carMake, carModel, carYear);
    } else if (carMake && carModel) {
      console.log("component mounted, calling loadPostsMakeModel");
      console.log(carMake, carModel, carYear);
      this.loadPostsMakeModel(carMake, carModel);
    } else if (carMake) {
      console.log("component mounted, calling loadPostsMake");
      console.log(carMake, carModel, carYear);
      this.loadPostsMake(carMake);
    } else {
      console.log("component mounted, calling loadPosts");
      console.log(carMake, carModel, carYear);
      this.loadPosts();
    }
  }

  componentDidUpdate() {
    //???
  }

  loadPosts = () => {
    API.getAllPosts({})
      .then(resp => {
        this.setState({
          posts: resp.data
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }


  loadPostsMake = (carMake) => {
    API.getPostByMake(carMake)
      .then(resp => {
        console.log("loadPostsMake success");
        this.setState({
          posts: resp.data,
          carMake: ""
        });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  loadPostsMakeModel = (carMake, carModel) => {
    API.getPostByMakeModel(carMake, carModel)
      .then(resp => {
        console.log("loadPostsMakeModel success");
        this.setState({
          posts: resp.data,
          carMake: "",
          carModel: ""
        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  loadPostsMakeModelYear = (carMake, carModel, carYear) => {
    API.getPostByMakeModelYear(carMake, carModel, carYear)
      .then(resp => {
        console.log("loadPostsMakeModelYear success");
        this.setState({
          posts: resp.data,
          carMake: "",
          carModel: "",
          carYear: 0
        })
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  handleInputChange = event => {
    const { name, value } = event.target;
    console.log("input Changed " + name + " " + value)
    this.setState({
      [name]: value
    });
  };

  handleFormSubmit = event => {
    event.preventDefault();
    console.log("Handling form submit");
    const { carMake, carModel, carYear } = this.state;
    const { history } = this.props
    if (carMake && carModel && carYear) {
      history.push('/search/' + carMake + '/' + carModel + '/' + carYear)
    } else if (carMake && carModel) {
      history.push('/search/' + carMake + '/' + carModel)
    } else if (carMake) {
      history.push('/search/' + carMake)
    } else {
      history.push('/')
    }
  }

  render() {
    return (
      <div>
        <div className="container-fluid">
          <div className="row">
            <div className="col-2">
              <Sidebar
                handleInputChange={this.handleInputChange}
                handleFormSubmit={this.handleFormSubmit}
              />
            </div>
            <div className="col-8 offset-1">
              {this.state.posts.map(post => (
                <PostContainer post={post} />
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default withRouter(Posts);

Я пытаюсь создать для пользователей способ фильтрации сообщений по 3 различным параметрам.В зависимости от того, сколько из 3-х они решат использовать, будет выполнен другой вызов API.Текущий код работает для отображения всех постов при первоначальном рендеринге, а функция поиска работает только один раз.Если пользователь пытается использовать функцию поиска, не возвращаясь домой, состояние и URL обновляются, но компоненты не обновляются.

Я читал, что могу использовать что-то вроде componentDidUpdate (), но я не понимаю, как получить предыдущий реквизит или даже предыдущее состояние.

Answer 1

componentDidUpdate (prevProps, prevState, снимок), где prevProps - это реквизиты вашего компонента перед обновлением, то же самое с prevState, this.state и this.props - поля вашего текущего компонента.Вы можете сравнить их, чтобы узнать, что вы что-то получили (prevProps.field! == this.props.field && this.props.field === что-то хорошее), например