对象数组返回空 JSX 元素

Question

我正在为客户开发一个时间管理应用程序，并且我正在使用本机反应。当用户创建一个新任务时，任务信息会被推送到一个对象数组中。这是一个空的初始状态。但由于某种原因，我在 ScrollView 中有一张空卡片。我什至尝试手动设置如果任务的标题不为空然后返回 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: '',
}