Нажатие на массив состояний React
Как я могу написать это лучше, я хочу сделать это с помощью setState вместо this.state.floors.push, поскольку я знаю, что это плохая практика, но я не мог этого понять. Я использую React Native.
FloorAPI.getFloorsByBuildingID(this.state.buildingID).then((response) => response.d.data.map((value) => {
console.info(value.floorName)
this.state.floors.push({value: value.floorName})
}))
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 8
Вы можете использовать
this.setState({floors: [{value: value.floorName}]});
чтобы использовать установленное состояние.
Это работает, но в массив помещается только один элемент, и мне нужно, чтобы все этажи были в этом массиве, поскольку он будет заполнять раскрывающееся меню.
// Create a new array based on current state:
let floors = [...this.state.floors];
// Add item to it
floors.push({ value: floorName });
// Set state
this.setState({ floors });
Просто и отлично работает, спасибо. Хотя что с тремя периодами, зачем это нужно?
Мне было немного странно оборачиваться, но ... является частью концепции под названием «деструктуризация»: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
лучшее осмысленное кодирование.
Вы можете создать новую переменную и нажать на переменную, а затем установить состояние после завершения карты
var tempArray = []
FloorAPI.getFloorsByBuildingID(this.state.buildingID).then((response) => response.d.data.map((value) => {
tempArray.push({value: value.floorName})
}))
this.setState({floors: tempArray})
FloorAPI.getFloorsByBuildingID(this.state.buildingID).then((response) => {
// get current floors
const { floors } = this.state;
// get new floors after api request
const newfloors = response.d.data.map((value) => ({value: value.floorName}))
// set the new state by combining both arrays
this.setState({ floors: [...floors, ...newfloors] });
})
Вы всегда можете использовать предыдущее состояние.
setState((prevState)=>({
floors: prevState.floors.push({...})
});
Это хороший способ избежать прямого изменения состояния. Другой способ - сделать следующее:
var newState=[...this.state.floors];
newState.push({...});
setState(()=>({
floors: newState
)}
Это своего рода мешанина из двух решений. В вашем первом решении вы не должны изменять prevState.floors, что и делает push, а во втором решении вам не нужно передавать обратный вызов setState, если вы создаете объект, который не использует аргумент state обратного вызова.
Спасибо! Не сейчас, когда мне не разрешили изменять prevState. Теперь, когда вы указали на это, я вижу причину этого.
На данный момент самый лучший и простой способ - это
this.setState(previousState => ({
floors: [...previousState.floors, {"value": value.floorName}]
}));
я получил ошибку TypeError: недопустимая попытка распространения не повторяемого экземпляра
@RayCoder Причина, по которой вы получаете TypeError : Invalid attempt to spread non-iterable instance, потому что данные, которые вы используете для разрушения, не являются массивом, и причина, по которой они не могут быть повторены, и причина, по которой вы получили ошибку.
const { floors } = this.state;
// Add item to it
floors.push({ value: 5 });
// Set state
this.setState({ floors });
В форме крючков вы можете использовать
setState((prevVals) => [...prevVals,newVals])
Возможный дубликат Правильный способ вставки в массив состояний