Question

在react-native中运行以下代码时，出现“ buttonColor是只读”错误。

我一直在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 只准备好了，这是因为我在上面的例子中包装了 (e)。

解决方案是

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

react-native useState错误（“只读”）

3 个答案: