Почему аргументы функциии updater написаны вот таким образом?

Question

[petroshevchenko1525]

Есть код одного React приложения.
В метод setState аргументом обычно передают объект, например вот так:

updateSearchInput = (e) => {
    this.setState({
      searchInput: e.target.value
    });
};

Но в данном коде в setState аргументом передают не обьект а передают функцию, вот так:

filter = () => {
    this.setState(
      ({ searchInput: searchInput, startDataArray: data, category }) => {
        return {
          filteredDataArray: data[category].filter(item =>
            item.firstName.toLowerCase().includes(searchInput.toLowerCase())
          )
        };
      }
    );
  };

Я хотел разобраться что это такое и зашел на официальный сайт реакта, и там узнал что первым аргументом в setState можно передавать функцию updater. Но все равно не понимаю некоторые вещи в данном коде.

Если тот код что находится после return мне понятен, то то что передано в аргументы updater функции мне не понятно:
1) Зачем в свойство searchInput я как значение передаю свойство searchInput?
2) Почему свойству startDataArray передаются аж два значения : data и category? Разве можно свойству обьекта давать два значения? Если да, то зачем в конкретном случае так сделали?
3) Почему в даном случае в метод filter передали аргументом функцию updater а не обьект?

Напишу весь код файла чтобы было лучше понятно:

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

class App extends React.Component {
  state = {
    day: 1,
    startDataArray: [],
    filteredDataArray: [],
    searchInput: "",
    category: "first"
  };

  componentDidMount() {
    this.fetchData();
  }

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

  changeDay = (argDay) => {
    this.setState({
        day: argDay
      },this.fetchData);
  };

  updateSearchInput = (e) => {
    this.setState({
      searchInput: e.target.value
    });
  };

  filter = () => {
    this.setState(
      ({ searchInput: searchInput, startDataArray: data, category }) => {
        return {
          filteredDataArray: data[category].filter(item =>
            item.firstName.toLowerCase().includes(searchInput.toLowerCase())
          )
        };
      }
    );
  };

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

  render() {
    const {searchInput, category, startDataArray, filteredDataArray} = this.state;

    return (
      <div>
        <TableSearch value={searchInput} onChange={this.updateSearchInput} onSearch={this.filter}/>
        
        {daysArray.map((day, i) => (
          <button key={day} onClick={() => this.changeDay(i)} className={i === this.state.day ? "active" : ""}>{day}</button>
        ))}
        
        <br />
            
        {Object.keys(startDataArray).map(item => (
          <button data-category={item} onClick={this.changeCategory} className={item === category ? "active" : ""}>{item} category</button>
        ))}
        
        <TableData data={filteredDataArray} />
      </div>
    );
  }
}

Answer 1

[davidnum95]

Вам бы жс подучить, прежде чем за реакт браться. Тривиальные примеры же.

Зачем в свойство searchInput я как значение передаю свойство searchInput?

Это уже к вас вопрос - зачем? Можно было просто:
({ searchInput, startDataArray: data, category })

Почему свойству startDataArray передаются аж два значения : data и category? Разве можно свойству обьекта давать два значения? Если да, то зачем в конкретном случае так сделали?

Запятую после data не видим?
data - это просто "псевдоним" для startDataArray, чтоб меньше буковок писать, category - просто отдельный параметр.

Почему в даном случае в метод filter передали аргументом функцию updater а не обьект?

Какой updater передали? Вы о чем вообще? filter принимает колбэк, который должен возвращать true/false соответственно. С чего вы взяли что туда нужно передавать объект?

Comments

[petroshevchenko1525]

-

Это уже к вас вопрос - зачем? Можно было просто:
({ searchInput, startDataArray: data, category })

я просто не понимаю как можно в свойство передать значением то же свойство, так как у меня нет переменной которая называлась бы searchInput

Запятую после data не видим?

запятую вижу, но разве можно одному свойству обьекта передать нескольно значений?

data - это просто "псевдоним" для startDataArray, чтоб меньше буковок писать, category - просто отдельный параметр.

вы не правы, data - это переменная в которую падают мои данные с API, вот:
const data = (await response.json()).group;
Посмотритите весь код, тогда будет понятно что делает код.

Какой updater передали? Вы о чем вообще? filter принимает колбэк, который должен возвращать true/false соответственно. С чего вы взяли что туда нужно передавать объект?

Какой true/false? Я вообще не об этом спрашиваю

[davidnum95]

petroshevchenko1525,

Лучше удалите ответ так вы такую фигню написали...

У вас каша какая то в голове, может с чего то попроще начнете?

[petroshevchenko1525]

davidnum95, наверное вы все таки правы) не разобрался сначала) спасибо)

Answer 2

[hzzzzl]

Почему свойству startDataArray передаются аж два значения : data и category? Разве можно свойству обьекта давать два значения? Если да, то зачем в конкретном случае так сделали?

https://learn.javascript.ru/destructuring-assignme...

this.setState(
      ({ searchInput: searchInput,   // хз зачем они так написали
         startDataArray: data,   // в функции будет переменная data которая = this.state.startDataArray
         category  // более короткая запись чем category: category
      }) => {
        return {
          filteredDataArray: data[category].filter(item =>  // здесь data это state.startDataArray
            item.firstName.toLowerCase().includes(searchInput.toLowerCase())
          )
        };
      }
    );

Почему в даном случае в метод filter передали аргументом функцию

почему, this.filter не принимает аргументов

fetchData = async () => {
//
    this.setState({
        startDataArray: data,
        category: Object.keys(data)[0] 
      },
      // выполнить this.filter() после того, как стейт заполнится новыми данными
      this.filter);
  };

  filter = () => { // это просто стрелочная функция без аргументов
    this.setState(
      // берем параметры из стейта, заодно переименовываем startDataArray
      ({ searchInput: searchInput, startDataArray: data, category }) => {
        return {
          // возвращаем новое значение стейта
          filteredDataArray: data[category].filter(item =>
            item.firstName.toLowerCase().includes(searchInput.toLowerCase())
          )
        };
      }
    );
  };

Comments

[petroshevchenko1525]

я так и не понял почему передается в startDataArray два значения, ведь я всегда думал что свойству любого обьекта можно задать только одно значение
первое значение:
переменная data, const data = (await response.json()).group;
свойство state обьекта - category, category: "first"

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

const {searchInput, category, startDataArray, filteredDataArray} = this.state;

может как-то по другому мне обьясните, но я что-то пока не понимаю

[hzzzzl]

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

да, всё так, но можно заодно переименовать имя переменной через :

const { category, blabla } = this.state // дальше будет две переменных category и blabla
const { category: cat, blabla } = this.state // дальше будет две переменных cat и blabla

то есть он там не передает в startDataArray два значения, startDataArray: data, переименовывает и category отдельно

[petroshevchenko1525]

hzzzzl, это кажется понял, но что значит такой код:
category: category
?
Тоесть я понимаю что слева от "=" this.state.category, а справа после "=" что такое?