无法读取未定义的属性（读取“值”）答案

【问题标题】：Cannot read properties of undefined (reading 'value')无法读取未定义的属性（读取“值”）
【发布时间】：2023-03-11 13:40:01
【问题描述】：

这是非常基本的，但我是 JS 和 React 的新手，我需要一些关于我做错了什么的指示。我有一个想要更改的Slider 组件，并且我想在类状态中反映/存储Slider 的新值。我该怎么写？

我收到此错误：

TypeError: Cannot read properties of undefined (reading 'value')

下面的代码示例：

import React from 'react';
import { Text, View, Button } from 'react-native';
import Slider from '@react-native-community/slider';
import { TextInput } from 'react-native-paper';

class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value1: 1
      };
    }

    render() {
        return(
            <View>
                <Text>Slider</Text>
                    <Slider 
                    value={this.state.value1}
                    onValueChange={(e) => this.setState({value1: e.target.value})}
                    minimumValue={1}
                    maximumValue={5}
                    step={1}/>
          </View>
      );
    }
  }
  
export default App;

【问题讨论】：

您所在的州没有mood 属性，您刚刚在您的州设置了value1 属性。
刚刚编辑以反映

标签： javascript react-native

【解决方案1】：

您的代码中没有情绪属性，我强烈建议您使用功能组件而不是类组件，以便能够使用钩子并使您的代码更加干净和可读。更多信息请查看React Functional Components VS Class Components

我修改了您的代码，现在它会在滑块移动时更新 value1 的状态：

import React from 'react';
import { Text, View, Button } from 'react-native';
import Slider from '@react-native-community/slider';
import { TextInput } from 'react-native-paper';



    const App = (props) =>{
      const [value1 , setValue1] = React.useState(1)


        return(
            <View>
                <Text>The value is : {value1}</Text>
                    <Slider 
                    value={value1}
                    onValueChange={setValue1}
                    minimumValue={1}
                    maximumValue={5}
                    step={1}/>
          </View>
      );
    
  }
  
export default App;

demo

【讨论】：

您能否提供一个示例，我可以将setValue1 写入可读状态？
可读状态是什么意思？
您可以像这样使用新值：{value1}，如果您检查这一行，您会看到我如何使用它将新值打印到屏幕上。值为：{value1}
将其分配给本地存储：localStorage.setItem("itemName", {value1});使用它：localStorage.getItem("itemName");
如果没有其他问题，请将问题标记为已解决。

【解决方案2】：

您的代码中没有情绪属性。所以它是未定义的。

【讨论】：