Переключение между двумя государствами реагировать


У меня два fetch звонки, какие обновления государства. И у меня есть две кнопки. Один делает выборки звонок, другой называет componentDidMount().

Первую выборку в componentDidMount().

Второй-на "все время" Нажмите кнопку с handleSortRecent().

"Последние сортировка" нажмите кнопку, Я хочу показать предыдущий подробной информации извлечена в componentDidMount. Для достижения этой цели Я звоню в componentDidMount() способ от handleSortRecent() метод.

Есть ли лучший способ сделать это без использования Redux?

const API = "https://fcctop100.herokuapp.com/api/fccusers/top/";

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataRecent : [],
      dataAlltime : []
    }

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
    this.handleSortRecent = this.handleSortRecent.bind(this);
  }

  componentDidMount() {
    fetch(API+"recent")
      .then( response => response.json() )
      .then( data => this.setState( { dataRecent: data } ) );
  }

  handleClick () {
    fetch(API+"alltime")
    .then(response => response.json())
    .then(data => this.setState({dataRecent:data}))
  }

  handleSortRecent() {
    this.componentDidMount();
  }

  render() {
    const arrRecentList = this.state.dataRecent;

    return (
      <div className="App">
      <button onClick={this.handleClick}>All Time Sort</button>
      <button onClick={this.handleSortRecent}>Recent Sort</button>
      {
        arrRecentList.map(data =>
          <div key={data.username}>
            <img src={data.img} width="50px" alt="" />
            <a href={"https://www.freecodecamp.org/"+data.username} target="_blank">{data.username}</a>
            <span> - </span>
            <span>{data.recent}</span>
            <span> - </span>
            <span>{data.alltime}</span>
          </div>
        )
      }
      </div>
    );
  }
}



1409
0
задан 5 февраля 2018 в 01:02 Источник Поделиться
Комментарии
1 ответ

Странно, что вы называете this.componentDidMount. Я не видел этого раньше. В любом случае, что если вы создали индикатор вашего штата, и заявил, что должно быть показано? Например:

this.state = {
dataRecent : [],
dataAlltime : [],
display: "recent"
}

Затем внутри функции render вы можете выбрать, что будет отображаться.

this.state.display === 'recent' 
? this.state.dataRecent.map...
: this.state.dataAlltime.map...

Я хотел создать две функции, которые обрабатывают с получением обоих наборов данных.

getAlltimeData() => {
fetch(API+"alltime")
.then(response => response.json())
.then(data => this.setState({ dataRecent:data }))
}

getRecentData() => {
fetch(API+"recent")
.then(response => response.json())
.then(data => this.setState({ dataRecent:data }))
}

Затем вы можете вызвать их обоих, когда компонент крепления.

componentDidMount() {
this.getAlltimeData();
this.getRecentData();
}

На данный момент у вас есть данные, которые вам нужны. Чего у вас нет-это обработчик клика для переключения между последними и все время.

handleRecentClick() {
this.setState({ display: 'recent' });
}

handleAlltimeClick() {
this.setState({ display: 'allTime' });
}

Передать те кнопки, которые изменяют состояние соответственно.

 <button onClick={this.handleRecentClick}>All Time Sort</button>
<button onClick={this.handleAlltimeClick}>Recent Sort</button>

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

2
ответ дан 17 февраля 2018 в 06:02 Источник Поделиться