Обновление реагирующего компонента из меню SideBar - PullRequest
Новая
       11

Обновление реагирующего компонента из меню SideBar

0 голосов
/ 05 июня 2018

У меня есть простое приложение реагирования, которое состоит из 3 компонентов: 1. SideBar, который содержит ссылки 2. ItemList, который содержит данные в таблице 3. Оболочка, которая оборачивает их обоих (из некоторых постов я понял, что иногда это полезно, так как я хочу обновить компонент ItemsList после нажатия на разные ссылки на боковой панели).

Что у меня сейчас работает:

В основном компоненте Wrapper: 

  render() {
    return (
        <div>
            <SideMenu handleClick={this.handleClick} />
            <ItemsList url={this.state.currentUrl} />
        </div>
    );

}

, как только приложение запускается, используя componentDidMount () в компоненте ItemsList, оно выбирает данные и отображает их.это работает нормально.

Проблема в том, что когда я щелкаю ссылки в компоненте sideMenu, я изменяю currentUrl в состоянии главной оболочки, поэтому он будет перерисован новым URL: 

  handleClick() {
    this.setState({ currentUrl: 'here I put the new address to fetch from'});
}

но извлекаются данные, которые находятся в предыдущем URL, а не те, на которые я только что их изменил.По сути, сразу после отладки и проверки состояния после его изменения currentUrl остается предыдущим, а затем повторно отображает ItemList с предыдущим URL.

Мой вопрос: как мне изменитьсодержимое itemList, используя этот метод handleClick ()?Надеюсь, я получу некоторые идеи.Большое спасибо, я был бы признателен за вашу помощь.

основной упаковщик Код: 

class MainWrapper extends React.Component {
constructor() {
    super();
    this.state = {
        currentUrl: 'current url to fetch from...',
        data: []
    };
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({ currentUrl: 'the new url ' });
}


render() {
    return (
        <div>
            <SideMenu handleClick={this.handleClick} />
            <ItemsList url={this.state.currentUrl} />
        </div>
    );

}

}

мой список элементов: 

class ItemsList extends Component {

  constructor(props) {
    super(props);
    this.state = { url: props.url, data: [] };
  }

  componentDidMount() {
    return fetch(this.state.url)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({ data: responseJson.data });
      })
  }

  render() {
    return (
      displaying the table html tags..

        }
      </div>
    )
  }
}

1 Ответ

0 голосов
/ 05 июня 2018

Вы можете использовать метод жизненного цикла componentDidUpdate в компоненте itemList.Каждый раз, когда изменяется URL-адрес, listItem, вероятно, будет перерисовывать, основываясь на том, что я понял из вашего вопроса, поэтому будет запущен метод componentDidUpdate.Именно в этом методе вы можете проверить новый URL и сделать новый запрос.

Подробнее здесь .

...