时间戳

首页 > 解决方案 > UseState 不会立即更改按钮颜色

reactjs - UseState 不会立即更改按钮颜色

问题描述

所以我使用来自 React useState 的循环创建了按钮

  const [booleanMonth,setMonth]=useState([
    {key:0,value:'January',color:'black'},
    {key:1,value:'February',color:'black'},
    {key:2,value:'March',color:'black'},
    {key:3,value:'April',color:'black'},
    {key:4,value:'May',color:'black'},
    {key:5,value:'June',color:'black'},
    {key:6,value:'July',color:'black'},
    {key:7,value:'August',color:'black'},
    {key:8,value:'September',color:'black'},
    {key:9,value:'October',color:'black'},
    {key:10,value:'November',color:'black'},
    {key:11,value:'December',color:'black'}
    ])

  const createButtonMonth = () =>{
    return (<View style={styles.containerForButtons2}>
            {
              booleanMonth.map((item,key) => 
                <View key={item.key} style={styles.buttonFilter3}><Button key={item.key} title={item.value} color={item.color}  value={item.value} 
                onPress={()=>onPressMonthFilter(item.key)}/></View>)
            }
            </View>)
    }

然后要更改按钮的颜色，我正在使用此功能来切换按钮颜色

  const onPressMonthFilter = (keymonth) =>{    
    if(booleanMonth[keymonth].color=='black'){
      booleanMonth[keymonth].color='green'
      setMonth(booleanMonth)
    }else{
      booleanMonth[keymonth].color='black'
      setMonth(booleanMonth)
    }
  }

按下按钮的颜色不会立即改变，但是当我关闭一些随机模式或执行我创建的刷新功能时，按钮的颜色就会改变。我不知道会发生什么，也不知道如何解决。

编辑：我正在使用它并立即更改按钮，这很奇怪，而不是我想要的解决方案，我不想循环

const onPressMonthFilter = (keymonth) =>{
    let monthChecked = []
    for(var i = 0 ; i<booleanMonth.length ; i ++){
      if(booleanMonth[i].key == keymonth){
          if(booleanMonth[i].color == 'green'){
            booleanMonth[i].color = 'black'
          }else{
            booleanMonth[i].color = 'green'
          }
        }
        monthChecked.push(booleanMonth[i])
      }
      setMonth(monthChecked)
}

标签： reactjsreact-nativebuttonuse-state

解决方案

拥有let monthCheck=booleanMonth不会创建状态的副本。它存储对该状态数组的引用。所以变异monthCheck会改变状态，这会导致你面临的问题。您在这里最简单的选择是使用该.map方法，因为它返回一个新数组，例如

const onPressMonthFilter = (keymonth) =>{
      setMonth(booleanMonth.map(month => ({
          ...month,
          color: month.key === keymonth ? 'green' : 'black'
      }))
   );
}

推荐阅读