реактивная ошибка useState («только для чтения») - PullRequest
Новая
       30

реактивная ошибка useState («только для чтения»)

0 голосов
/ 22 сентября 2019

При запуске приведенного ниже кода в реактивном режиме я получаю сообщение об ошибке «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;

Ответы [ 2 ]

0 голосов
/ 22 сентября 2019

В дополнение к ответу, опубликованному Атином выше, я также подумал о способе сделать это, используя числовые значения и массив цветов, которые я в конечном итоге выбрал из-за необходимости некоторого базового двоичного представления данных.

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;
0 голосов
/ 22 сентября 2019

Проблема в том, что вы назначаете значение цвета кнопки вместо его сравнения, т.е. используете = вместо ===.Вы в основном устанавливаете значение для цвета кнопки, что является неправильным. 

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;
...