React Native - вложенный объект set State не работает должным образом
Я хочу установить состояние вложенного объекта, и я пробовал этот ответ, но я не знаю каждый раз, когда я setState после ответа, состояние все еще не установлено
Вот мой код, который я пробовал:
// declare the state
constructor(props){
super(props);
this.state = {
bius: {name:'bius', time:0, status:false},
}
}
// Function to setstate
_timer(name){
// this.setState({[name]: !this.state.name})
var upd = {...this.state[name]}
upd.status = !upd.status
console.info(upd.status)
console.info(this.state.bius)
this.setState({upd})
console.info("setstate upd")
console.info(upd)
console.info(this.state.bius)
}
// here I call the function to set state
<TouchableOpacity onPress = {()=>{this._timer('bius')}}>
<Text style = {[global.global.SubHeaderText, {color:'white'}]}>Start</Text>
</TouchableOpacity>
и вот вывод журнала:
I/ReactNativeJS(6694): true
I/ReactNativeJS(6694): { name: 'bius', time: 0, status: false }
I/ReactNativeJS(6694): setstate upd
I/ReactNativeJS(6694): { name: 'bius', time: 0, status: true }
I/ReactNativeJS(6694): { name: 'bius', time: 0, status: false }
Я не знаю, почему upd.status уже true, а this.state.bius.status все еще false?
почему this.state.bius.status не установлен на true?
Разве this.setState (...) не должен находиться вне функции _timer?
@parohy по-прежнему не повезло, ваш 1-й предлагает дать мне тот же результат, а ваш 2-й предложение заставляет мою функцию не работать должным образом
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Я думаю, вы ошиблись, я this.setState({upd})
Можно по другому сделать this.setState({bius:upd})
Попробуйте это, дайте мне знать, что случилось.
Вы можете проверить свое обновление состояния или нет в обратном вызове this.setState ({bius: upd}, () => {Console.log (this.state.bius);}) Проверьте это, я уверен, что вы получаете обновленное состояние в вызове назад.
кажется, что console.info не появляется, что случилось -_-
Вам нужно привязать событие. Прочитать эта реактивная документация
Вам также нужно использовать оператор распространения здесь и изменить только ключ, который вы тоже хотите
this._timer.bind(this,'bius');
//..
this.setState(prevState => ({
bius: {
...prevState.bius,
status: !prevState.bius.status
}));
И у вас upd.status = !upd.status; не будет работать, так как состояние не изменилось. Вам также нужно вызвать setState. И еще одна вещь, о которой упоминалось в комментарии к вашему вопросу. Вам следует использовать стрелочные функции, если вы не собираетесь привязывать обработчик событий.
Я пробовал ваш код, но приложение не обнаружило status как переменную
может понадобиться status: !prevState.status
Дай мне знать, как дела
Как вы видите в моем коде о событии onPress, я использую {()=>{this._timer('bius')}}, поэтому привязка не используется, но все же console.info показывает тот же результат, что и я объявляю, подходит ли ...prevState.bius для реализации?
o.O ой status: !prevState.bius.status
setState - это асинхронная функция. Итак, если вы хотите распечатать свое состояние, вам следует выполнить обратный вызов console.info (). Например:
this.setState({bius: {name:'example'}},()=>{console.info(this.state)})
this.setState() updates the state asynchronously. That is why you do not see in console log. To get the log correctly add a console.info in render function as below .
export default class app extends Component {
constructor(props) {
super(props);
this.state = {
bius: { name: 'bius', time: 0, status: false },
}
}
// Function to setstate
_timer(name) {
var upd = { ...this.state[name] }
upd.status = !upd.status
this.setState({ bius: upd })
}
render() {
console.info("MYLOG", this.state.bius)
return (
<TouchableOpacity style = {{ margin: 100 }} onPress = {() => { this._timer('bius') }}>
<Text >Start</Text>
</TouchableOpacity>
)
}
}
Я думаю, вам нужно привязать функцию _timer к компоненту, потому что он не знает о состоянии. Перепишите его в es6 ‘func _timer = (name) => {}’ или в конструкторе ‘this._timer.bind (this._timer)’