Question

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

ip link add "${interface}" 2> /var/tmp/myprog.output || print 2 $(cat /var/tmp/myprog.output)

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

  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>)
    }

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

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

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

Answer 1

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

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

UseState不会立即更改按钮颜色

1 个答案: