react-本机useState错误("is read-only")

Question

当在react-native中运行下面的代码时，我得到一个"buttonColor is read-only“错误。

我已经查看了useState上不同地方的文档，但仍然不确定是什么导致了这个特定的错误。

我希望按钮在每次点击后在“绿色”(初始状态)和“红色”之间切换，但它只是在第一次渲染时显示绿色，然后在第一次点击后收到错误消息。

import React, {useState} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

const ColorSquare = () => {

    const[buttonColor, setColor] = useState('green');

    const changeColor = () => {

        if (buttonColor='green') {
            setColor('red')
        } else if (buttonColor='red') {
            setColor('green')
        } else {
            setColor('blue')
        }
    }

      return (
        <View style={styles.container}>
            <TouchableOpacity
                style={{backgroundColor:buttonColor, padding: 15}}
                onPress={()=>changeColor()}
                  >
              <Text style={styles.text}>Change Color!</Text>
            </TouchableOpacity>
        </View>
      );
};  

const styles = StyleSheet.create({
    text:{
      color:'white'
      },
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff',
    },
  });

export default ColorSquare;

Answer 1

问题是你赋值的按钮颜色，而不是比较它，即使用=而不是===。您基本上是在将一个值设置为按钮颜色，这是错误的。

import React, {useState} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

const ColorSquare = () => {

    const[buttonColor, setColor] = useState('green');

    const changeColor = () => {

        if (buttonColor==='green') { // use === instead of == //
            setColor('red')
        } else if (buttonColor==='red') { // use === instead of == //
            setColor('green')
        } else {
            setColor('blue')
        }
    }

      return (
        <View style={styles.container}>
            <TouchableOpacity
                style={{backgroundColor:buttonColor, padding: 15}}
                onPress={()=>changeColor()}
                  >
              <Text style={styles.text}>Change Color!</Text>
            </TouchableOpacity>
        </View>
      );
};  

const styles = StyleSheet.create({
    text:{
      color:'white'
      },
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff',
    },
  });

export default ColorSquare;

Answer 2

除了上面Atin发布的答案之外，我还想到了一种使用数值和颜色数组的方法，由于需要数据的一些底层二进制表示，我最终选择了使用这些颜色。

import React, {useState} from 'react';
import {StyleSheet, Text, View, TouchableOpacity} from 'react-native';

const ColorSquare = () => {

    const[buttonNumber, setNumber] = useState(0);

    const colors = ['green','red']

    const changeColor = () => {

        if (buttonNumber<1) {
            setNumber(buttonNumber => buttonNumber + 1)
        } else {
            setNumber(buttonNumber => buttonNumber - 1)
        }
    }

      return (
        <View style={styles.container}>
            <TouchableOpacity
                style={{backgroundColor:colors[buttonNumber], padding: 15}}
                onPress={()=>changeColor()}
                  >
              <Text style={styles.text}>Change Color!</Text>
            </TouchableOpacity>
        </View>
      );
};  

const styles = StyleSheet.create({
    text:{
      color:'white'
      },
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#fff',
    },
  });

export default ColorSquare;

Answer 3

嗨，如果你在2021年遇到这个问题，我想告诉你我做错了什么

在我的例子中，我尝试使用一个handleChange函数来setState，如下所示

 const handleChange = (e) => {
    setCustomerLogin({...customerLogin, [e.target.name]: e.target.value})

我正在获取一个setCustomerLogin is ready，这是因为我在上面的例子中包装了(e)。

解决方案是

 const handleChange = e => {
     setCustomerLogin({...customerLogin, [e.target.name]: e.target.value})