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

Question

[hulktoster]

Есть вот такая часть из 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;

Answer 1

[0xD34F]

Вместо явного объявления переменной можно деструктурировать объект события:

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

Ну и бегом читать документацию, осознавать свою ошибку.

Comments

[hulktoster]

спасибо, но нужно как-то так, :

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

Я не понимаю почему не работает, должно ведь работать...

[0xD34F]

hulktoster, вы документацию всё-таки откройте - ссылка в ответе не просто так.

[hulktoster]

0xD34F, но все же, почему не работает вот это?:

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

в state у меня есть свойство shift у которого значение "first"(название масива)

В setState передается обьект, и пишется свойство обьекта state которое нужно изменить а после ":" пишут новое значение. Я ведь все также сделал, что тогда не так?

[0xD34F]

hulktoster, вы что, издеваетесь? В третий раз говорю: читайте документацию. Нужная вам информация там есть.

[Yustas Alexu]

hulktoster, код который находится в колбэке:

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

является асинхронным. Если вы внимательно прочитаете документацию, которую так настоятельно рекомендует вам прочитать автор ответа, то увидете там такие строки:

События SyntheticEvent содержатся в пуле. Это означает, что объект SyntheticEvent будет повторно использован, а все его свойства будут очищены после вызова обработчика события. Это необходимо из соображений производительности. Именно поэтому нельзя использовать синтетические события асинхронно.

Первая версия кода работала, потому что ссылка на поле в событии была сохранена в переменную в синхронной части кода до начала вызова асинхронного колбэка.

[hulktoster]

Yustas Alexu, спасибо!) проблема решена вот так:

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

[EVG]

А лучше бы оставили как есть - потом добрым словом при отладке вспомните. В любом случае, интерпретатор при прогоне будет создавать еще одну переменную.