Есть код одного 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>
);
}
}
Простой