I think I know the issue but I don't have the solution, so I have these buttons that I create with looping on useState arrray
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}
])
And then to render the buttons :
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])
now this is the onPress function which change the checked status to true or false, hence supposedly change the color of those buttons
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)
}
In the console log it returned with checked true or false , which means my code is correct but It doesnt render the right color , false = black , true = green
Help newbie reactjs user here please :<
I think it's due to the memoization.
Try to remove the useMemo as it captures the components and prevents him from getting rerendered.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.