Обновление состояния делает ошибку рендеринга массива

Question

У меня есть 4 кнопки, которые обновляют состояние «mode»:

<tr><button value = {0} name="mode" onClick={this.handleChange}>Montrer toutes les chambres</button></tr>
<tr><button value = {1} name="mode" onClick={this.handleChange}>Montrer les chambres vides</button></tr>
<tr><button value = {2} name="mode" onClick={this.handleChange}>Montrer les chambres avec de la place</button></tr>
<tr><button value = {3} name="mode" onClick={this.handleChange}>Montrer les chambres pleines</button></tr>

handleChange(event) {
    this.setState({[event.target.name] : event.target.value});
}

это состояние изменяет рендеринг на основе массива

let txt = myarray.map((item) => {
        console.log(this.state.mode);
        console.log(item);
        if(item===null)
            return(<div>Problème</div>);
        if(this.state.mode===0)
            return(<div>{item.info}</div>);
        else if ((this.state.mode===1)&& (b1))
            return(<div>{item.info}</div>);
        else if((this.state.mode===2) && (b2))
            return (<div>{item.info}</div>);
        else if((this.state.mode===3) && (b3))
            return (<div>{item.info}</div>);
        else return(<div>Invalid item</div>);
    });
return txt;

mode установлено на 0 когда запускаю программу, и все работает.Однако когда я изменяю mode, каждый элемент возвращает недопустимый элемент (даже для mode=0).Я попытался установить b1, b2 и b3 на true для тестирования, но это не работает, так что это не проблема.2 console.log отлично работает и показывает правильные значения.

Может кто-нибудь мне помочь?Является ли значение проблемы?

Answer 1

вы можете просто отправить его как числовой аргумент (который вы пытаетесь проверить позже с помощью операторов if) в функции как таковой:

<tr>
  <button name="mode" onClick={e => this.handleChange(e,3)}>
    Montrer les chambres pleines
  </button>
</tr>

handleChange(event, value) {
  this.setState({[event.target.name] : value});
}

Answer 2

Разобрать значение в целое число

handleChange(event) {
    this.setState({[event.target.name] : parseInt(event.target.value)});
}