Кнопки рендеринга React Native
Я думаю, что знаю проблему, но у меня нет решения, поэтому у меня есть эти кнопки, которые я создаю с помощью цикла на массиве useState
const [booleanMonth,setMonth]=useState([
{key:0,value:'January',title:'Jan',checked:false},
{key:1,value:'February',title:'Feb',checked:false},
{key:2,value:'March',title:'Mar',checked:false},
{key:3,value:'April',title:'Apr',checked:false},
{key:4,value:'May',title:'May',checked:false},
{key:5,value:'June',title:'Jun',checked:false},
{key:6,value:'July',title:'Jul',checked:false},
{key:7,value:'August',title:'Aug',checked:false},
{key:8,value:'September',title:'Sep',checked:false},
{key:9,value:'October',title:'Oct',checked:false},
{key:10,value:'November',title:'Nov',checked:false},
{key:11,value:'December',title:'Dec',checked:false}
])
А затем отобразить кнопки:
const createButtonMonth = useMemo(() =>{
console.log('createButtonMonth')
return (<View style={styles.containerForButtons2}>
{
booleanMonth.map((item,key) =>
<View key={item.key} style={styles.buttonFilter3}>
<Button style={styles.buttonFilter3}
title={item.title}
value={booleanMonth[item.key].checked}
onCheckColor='red'
color={booleanMonth[item.key].checked==true ? 'green':'black'}
onPress={()=>onPressMonthFilter(booleanMonth[item.key].key,booleanMonth[item.key].checked)}
/></View>)
}
</View>)
},[booleanMonth])
теперь это функция onPress, которая меняет проверенный статус на true или false, следовательно, якобы меняет цвет этих кнопок
const onPressMonthFilter = (keyMonth,statusMonth) =>{
if(booleanMonth[keyMonth].checked==true){
booleanMonth[keyMonth].checked=false
console.log(booleanMonth)
setMonth(booleanMonth)
}else{
booleanMonth[keyMonth].checked=true
console.log(booleanMonth)
setMonth(booleanMonth)
}
setMonth(booleanMonth)
}
В журнале консоли он вернулся с проверкой true или false, что означает, что мой код правильный, но он не отображает правильный цвет, false = черный, true = зеленый
Помогите новичку-пользователю reactjs здесь, пожалуйста:<
1 ответ
Думаю, это из-за запоминания.
Попробуйте удалить useMemo, поскольку он захватывает компоненты и предотвращает его повторную визуализацию.