@hulktoster

Как сделать код без переменной shift в этой части кода?

Есть вот такая часть из React-Redux приложения:
.....
onClick = event => {
    const shift = event.target.dataset.shift;
    this.setState(() => ({ shift }), this.filter);
  };

....


Хочу event.target.dataset.shift не ложить в переменную shift. Но как бы я не делал у меня ошибки. Вот как я переделал:

....
onClick = event => {
  
    this.setState(() => ({ shift: event.target.dataset.shift}), this.filter);
  };


.....

И не работает(

Укажите пожалуйста на ошибку.

А вот код всего компонента(если нужно будет):
App.js

const days = ["yesterday", "today", "tomorrow"];

class App extends React.Component {
  state = {
    day: 1,
    data: [],
    filteredData: [],
    search: "",
    shift: "first"
  };

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    const response = await fetch(`/data/${days[this.state.day]}.json`);
    const data = (await response.json()).group;
    this.setState({ data, shift: Object.keys(data)[0] }, this.filter);
  };

  loadDay = day => {
    this.setState({ day }, this.fetchData);
  };

  updateSearch = e => {
    this.setState({
      search: e.target.value
    });
  };

  filter = () => {
    this.setState(({ search, data, shift }) => {
      const s = search.toLowerCase();
      return {
        filteredData: data[shift].filter(n =>
          n.firstName.toLowerCase().includes(s)
        )
      };
    });
  };

  onClick = event => {                                                
    const shift = event.target.dataset.shift;           //эта часть
    this.setState(() => ({ shift }), this.filter);
  };

  render() {
    const { search, shift, data, filteredData } = this.state;

    return (
      <div>
        <TableSearch
          value={search}
          onChange={this.updateSearch}
          onSearch={this.filter}
        />
        {days.map((day, i) => (
          <button
            key={day}
            onClick={() => this.loadDay(i)}
            className={i === this.state.day ? "active" : ""}
          >
            {day}
          </button>
        ))}
        <br />
        {Object.keys(data).map(n => (
          <button
            data-shift={n}
            onClick={this.onClick}
            className={n === shift ? "active" : ""}
          >
            {n} shift
          </button>
        ))}
        <TableData data={filteredData} />
      </div>
    );
  }
}
export default App;


  • Вопрос задан
  • 132 просмотра
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
onClick = ({ target: { dataset: { shift } } }) => {
  this.setState(() => ({ shift }), this.filter);
}

Ну и бегом читать документацию, осознавать свою ошибку.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы