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

Posted 2023-04-18

【中文标题】无法读取未定义的属性（读取“值”）

【英文标题】：Cannot read properties of undefined (reading 'value')

【发布时间】：2022-01-17 03:27:09

【问题描述】：

这是非常基本的，但我是 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 属性。

刚刚编辑以反映

【参考方案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】：

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