objects returns 个空 JSX 元素数组

Question

我正在为客户开发一个时间管理应用程序，我正在使用 React Native。当用户创建新任务时，任务信息会被推入一个 objects 的数组中。这是一个空的初始状态。但出于某种原因，我在 ScrollView 中有一张空卡片。如果任务的标题不为空，我什至尝试手动设置 return jsx 元素，但没有成功。知道我做错了什么。

创建任务的函数

  Create_Task = () => {
    let {daily, Title, TaskTime} = this.state;
    daily.shift();
    daily.push({ID: this.makeid(5), TaskName: Title, TaskTime: TaskTime});    
    this.setState({daily: [...this.state.daily, Title]});
  };

数组初始状态及所有信息

const initialState = [{ID: '', TaskName: '', TaskTime: ''}];
 this.state = {
   daily: initialState,      
   Title: '',
   TaskTime: '',
}

返回 JSX 元素

<View style={styles.tasks}>
          <ScrollView>
            {this.state.daily.map(x => {
              if (x.TaskName !== ' '){
                return (
                <Card style={styles.card} key={x.ID}>
                  <View style={styles.cardView}>
                    <TouchableOpacity
                      style={styles.btnComplete}></TouchableOpacity>
                    <Text style={styles.task_Title}>{x.TaskName}</Text>
                    <Text style={styles.taskTime}>{x.TaskTime}</Text>
                  </View>
                  </Card>
                );    
              }              
            })}
          </ScrollView>
        </View>

Answer 1

当您初始化时，您的初始状态中有一个对象。只需用空数组初始化即可解决您的问题。

const initialState = [];
 this.state = {
   daily: initialState,      
   Title: '',
   TaskTime: '',
}

objects returns 个空 JSX 元素数组

Array of objects returns empty JSX elements

javascript

android

jsx

react-native