Как получить данные для компонента

ProgramBox

Как получить данные для компонента

Post author:admin
Запись опубликована:20 мая, 2023
Post category:Вопросы по программированию

#javascript #reactjs

Вопрос:

У меня есть две страницы (страница 1 и страница 2) с SimpleTable компонентом.

У меня есть страница с таблицей для яблок:

   render() {
    const props = this.props
    return (
      <Page {...props}>
        <SampleTable requestData={this.getApples} columns={[<columns for apples>]} />
      </Page>
    )
  }

И страница с таблицей для tomatoes:

   render() {
    const props = this.props
    return (
      <Page {...props}>
        <SampleTable requestData={this.getTomatoes} columns={[<columns for tomatoes>]} />
      </Page>
    )
  }

По неизвестным мне причинам этот конкретный дочерний элемент ( SampleTable ) не размонтируется / монтируется при переходе со страницы 1 на страницу 2 или наоборот.

Это странно, поскольку все остальные дочерние элементы на всех других страницах монтируются / размонтируются, даже когда я использую один и тот же компонент для дочерних элементов. Итак, очевидно, что я не понимаю, как / когда React решает смонтировать / размонтировать или когда он решает повторно использовать компонент. Но я отвлекся.

Я приму этот факт: React будет повторно использовать дочерние элементы, когда ему заблагорассудится.

Моя проблема в том, что я использую Sampletable.componentDidMount для запроса данных:

   componentDidMount() {
    console.log('SampleTable did mount. Requesting data ...')
    this.props.requestData(state.pageSize, state.page, state.sorted, state.filtered).then(res => {
      this.setState({
        data: res.rows,
        pages: res.pages,
        loading: false,
      })
    })
  }

Но функция запроса данных предоставляется родительским, через props . У меня следующая проблема:

при первоначальном рендеринге страница 1 предоставляет requestData=getApples via props для SampleTable дочернего элемента.
SampleTable монтирует и запрашивает данные, используя getApples метод, предоставленный page1
Я перехожу к page2
page2 предоставляет другой requestData=getTomatoes метод для SampleTable дочернего элемента
каким-то образом Reacts решает, что он может повторно использовать исходный компонент для этого дочернего элемента и, поскольку он уже смонтирован, componentDidMount не вызывается
и поэтому новый getTomatoes метод не вызывается, и никакие данные, подходящие для таблицы tomatoes, не запрашиваются.

Что я делаю не так?

Как я могу гарантировать, что изменение в props запускает перезагрузку данных?

1. Ваш вопрос мне не очень понятен. Когда вы говорите «страница 1» и «страница 2», вы говорите о двух разных компонентах React или о его подобной разбивке на страницы, где компонент одинаков, вы изменяете данные внутри компонента страницы?

2. @ArpitAgrawal использует два разных компонента, используя Page компонент

3. можете ли вы проверить, вызывается ли componentWillUnmount при переходе от 1 компонента к другому компоненту, поскольку вы визуализируете два разных компонента?

4. @ArpitAgrawal Я не уверен, что ты имеешь в виду. В моей первоначальной настройке (без key= ) дочерний компонент был смонтирован один раз и больше не размонтировался. Переход от page1 к page2 (оба с дочерним элементом на основе одного и того же SimpleTable компонента) позволил react повторно использовать дочерний элемент.

5. Давайте не будем называть их Page1 и Page2, потому что это сбивает с толку разбивку на страницы или компонент страницы. Поскольку это два разных компонента, давайте назовем их Component 1 и Component 2. Теперь, насколько я понимаю, react гласит, что при переходе с C1 на C2 C1 должен размонтировать, если они разные. если C1 и C2 на самом деле одинаковы, и вы передаете только разные реквизиты, то компонент не будет размонтирован, вместо этого componentWillRecieveProps вызывается метод. Было бы полезно, если бы вы могли поделиться некоторым codesnippet.

Ответ №1:

Вам следует попробовать использовать уникальный атрибут key в вашем компоненте SampleData при его вызове, чтобы react узнал, что это другой экземпляр вашего компонента, и соответствующим образом перерисовал его.

Вы можете найти больше о ключах здесь:https://reactjs.org/docs/lists-and-keys.html

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

2. Я действительно хотел бы знать, как лучше решить проблему такого рода. Как бы вы это решили?

3. давайте сначала выясним, в чем собственно проблема. Поскольку у него есть два разных компонента, и переход от 1 компонента к другому компоненту должен вызывать componentWillUnmount , поэтому я не думаю, что это случай обновления dom, оптимизирующего react. Но давайте дождемся ответа OP.

4. Я не уверен, что это лучший способ решить проблему, но этот подход решает ее для меня. Затем компонент размонтируется / монтируется, что запускает перезагрузку данных.

5. Это странно, потому что компоненты являются дочерними элементами разных родителей. Они должны быть разными экземплярами, но каким-то образом react решает повторно использовать дочерний элемент одного родителя для другого родителя, если не предоставлен ключ. Понятия не имею, что происходит, но использование key= при объявлении дочернего компонента в родительском решает проблему.