Получать данные и setState каждый раз перед визуализацией компонента в React Native - PullRequest
Новая
       34

Получать данные и setState каждый раз перед визуализацией компонента в React Native

1 голос
/ 18 апреля 2020

Есть случай, у меня есть модал, который показывает некоторые данные из его состояния (массив), и его состояние устанавливается в функции componentDidMount (), как предполагает docs. Мне нужно показывать обновленные данные каждый раз, когда открывается модальное окно. Так что я смог сделать это с помощью функции componentWillReceiveProps (nextProps), как я показал ниже.
Но что, если я захочу перейти на функцию getDerivedStateFromProps? Как я собираюсь добиться такого же поведения с ним?

Вот код компонента, упрощенный ради: 

export class PastOrdersModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      past: {},
      isLoading: false,
      modalVisible: false
    };
  }

  async componentWillReceiveProps(nextProps) {  
    const response = await this.fetchPast();
    this.setState({ past: response });
  }

  async componentDidMount() {
    const response = await this.fetchPast();
    this.setState({ past: response });
  }
   ...
   ... some callback functions for handling modalvisible value ....
   ...
   render(){
   // here rendering state array with this.state.past.map(......) etc.
  }

Функция fetchPast делает GET-запрос на мой сервер, все, что вам нужно знать, это вернуть массив в меня. Это работает отлично. ComponentWillReceiveProps вызывается каждый раз, потому что родительский компонент отправляет реквизиты modalVisible каждый раз.
Но componentWillRecieveProps устарел, и я не могу выполнить то же поведение с getDerivedStateFromProps. Как мне реализовать то же самое с ним.

Примечание : я не собираюсь использовать избыточность, я не собираюсь использовать mobx, я знаю, как их использовать, и это не то, чего я хочу. Дело в том, что поведение, которое я хочу, настолько простое, что я не хочу передавать значения другому компоненту, я не хочу передавать значения другому экрану, я просто хочу обновить простой компонент, который есть все, но фреймворк толкает его ограничения, чтобы сделать простейшие задачи сложнее всего, или я упускаю действительно огромную точку. (вероятно, последняя :))

Примечание : я знаю, что я ничего не делаю с nextProps, это было Единственное решение, которое я нашел.

1 Ответ

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

Вы можете написать свой Компонент как функцию, чтобы вы могли использовать React Hooks 

const PastOrdersModal = (props) => {
  const [past, setPast] = useState({});
  const [isLoading, setLoading] = useState(false);
  const [modalVisible, setModalVisibility] = useState(false);

  useEffect(() => {
    const fetchPast = async () => {
      const response = await fetchPast();
      setPast(response);
    };
    if(modalVisible) fetchPast();
  }, [modalVisible])

  useEffect(() => {
    const fetchPast = async () => {
      const response = await fetchPast();
      setPast(response);
    };
    fetchPast();
  }, [])

   ...
   ... some callback functions for handling modalvisible value ....
   ...
   return <YourComponent />

Переменные, которые мы создали внутри [] вверху, это те, которые мы используем для штат. Первым будет само состояние, а вторым - функция, ответственная за обновление этого состояния. Хук useEffect будет имитировать методы жизненного цикла для компонентов класса, он получит обратный вызов, который будет выполнен, и второй аргумент. Второй аргумент - это тот, который будет указывать, когда он будет запущен. Например, вы можете видеть 2 useEffect s, тот, у которого пустой массив, скажет хуку выполнить только один раз, подобно componentDidMount. Другой будет срабатывать при изменении modalVisible, поэтому каждый раз, когда вы изменяете его значение, он будет выполняться, поэтому мы проверяем, только если модал видим (true), мы делаем выборку, иначе выборка не будет исполняться

...