Question

我刚接触编码和React-Native，并且在广泛的谷歌搜索后遇到了这个我无法找到答案的错误（这可能是由于我的新生而不理解给予其他用户的答案，所以请耐心点，并指出我正确的方向，如果是这样的话）

错误是：

undefined不是一个对象（评估＆＃39; timeAsProp.slice＆＃39;）

所以要解释 timeAsProp.slice 是什么：基本上我需要时间作为支撑传递给 newOrder（）方法，只需两位数。如果时间 10:00:00 ，我的newOrder方法应该只是过程： 10

当前时间存储在状态中。

currentTime: new Date().toLocaleTimeString()

上述当前时间状态在仿真器上读出：

12:00:00 //如果时间是12:00 ocklock

功能

newOrder（timeAsProp）

收到时间，根据小时数，应该返回一小时内每小时要渲染的不同图像数组。（我只将两个时间选项硬编码到应用程序中，因为我仍在构建它。之后将会有一个单独的图像顺序返回，每小时。它以这种方式硬编码，每小时有一个单独的选项，直到我可以弄清楚如何有一个循环根据时间自动设置图像的正确顺序）

基本上，我需要一种不同的方式来做这件事，或弄清楚为什么我会得到这个错误...

事先提前;）

继承我的代码：

import React, { Component } from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';
import AwesomeButton from 'react-native-awesome-button';
import Style from './Style';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            currentTime: null,
        };
    }
    componentDidMount() {
      setInterval(() => {
        this.setState({
          currentTime: new Date().toLocaleTimeString()
        });
      }, 1000);
    }
    handleButtonPress() {

    }

    **// heres the timeAsProp.slice which is giving me the error:**

    newOrder(timeAsProp) {
        const hour = timeAsProp.slice(0, 2);
        if (hour === '19') {
            return [
           <div>     
            <Image source={require('./img/hey2.png')} style={Style.image} />
            <Image source={require('./img/vav.png')} style={Style.image} />
            <Image source={require('./img/hey1.png')} style={Style.image} />
            <Image source={require('./img/yud.png')} style={Style.image} />
          </div>  
            ];  
        }
        if (hour === '20') {
            return [
           <div>     
            <Image source={require('./img/vav.png')} style={Style.image} />
            <Image source={require('./img/hey2.png')} style={Style.image} />
            <Image source={require('./img/hey1.png')} style={Style.image} />
            <Image source={require('./img/yud.png')} style={Style.image} />
           </div>  
            ];
        }
    }

render() {
    return (
        <View style={Style.rootContainer}>
            <View style={Style.headerContainer}>
                <Text style={styles.blue}> {this.state.curentTime} </Text> 
            </View>
            <View style={Style.displayContainer}>

                 **//this is whats calling newOrder and returning the images**

                 {this.newOrder(this.state.time)}
            </View>
            <View style={Style.buttonContainer} >
                <AwesomeButton
                    states={{
                        default: {
                            text: 'DeeDee! Dont press da button!',
                            backgroundStyle: {
                                backgroundColor: 'blue',
                                minHeight: 45,
                                alignItems: 'center',
                                borderRadius: 30,
                                marginBottom: 15,
                                marginLeft: 15,
                            },
                            onPress: this.handleButtonPress
                        }
                    }}
                />
            </View>
        </View>
    );
   }
}

const styles = StyleSheet.create({
  blue: {
    fontFamily: 'serif',  
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  }
});

export default App;

感谢您一起来，希望能给我一些新的东西！ SB

Answer 1

首先，你必须改变

aList.erase(i.base(), aList.end());

要

{this.newOrder(this.state.time)}

然后，在构造函数中，初始化currentTime

{this.newOrder(this.state.currentTime)}

原因是，如docs中所述，render（）在componentDidMount（）之前执行，因此在调用newOrder时，currentTime尚未初始化。

Answer 2

{this.newOrder(this.state.time)}是你在渲染方法中调用的，但你在状态中的值是currentTime：

this.state = { currentTime: null, };

确保将正确的变量传递给您正在调用的方法。此外，最好在使用它之前检查变量具有您期望的类型和值的方法。因此，在newOrder内部，可能会在调用timeAsProp之前检查typeof timeAsProp === 'string'是否为类型字符串（slice）。

react-native：undefined不是一个对象（评估＆＃39; prop.slice＆＃39;）

2 个答案: