Reactjs React-函数作为React子函数无效

这是我第一次申请。 我将一个组件调用到另一个组件中，然后将这些函数移动到app.js

//app.js

   class App extends React.Component {
  state = {
    todos:[
      {id:1, title:'get haircut',completed: false},
      {id:2, title:'learn react',completed: false},
      {id:3, title:'chaaa',completed: false},
    ]
  }
  markComplete=(id) =>{
    this.setState({
      todos: this.state.todos.map((myTodo)=>{
        if(myTodo.id === id ){
          myTodo.completed = !myTodo.completed;
        }
        return myTodo
      })
    })
  };
  deleteTodo =(id) =>{
    this.setState({
      todos: [...this.state.todos.filter((myTodo) =>{
        return myTodo !==id
      })]
    })
  }
  render(){
  return (
    <div className="App">
      <Header/>
      <RetrivedTodos todos={this.state.todos}
      markComplete={this.markComplete}
      deleteTodo={this.deleteTodo}
      />
    </div>
  );
  }
}

类应用程序扩展了React.Component{
状态={
待办事项：[
{id:1，标题：'get haircut'，完成：false}，
{id:2，标题：'learn react'，completed:false}，
{id:3，标题：'chaaa'，完成：false}，
]
}
markComplete=（id）=>{
这是我的国家({
todos:this.state.todos.map（（myTodo）=>{
if（myTodo.id==id）{
myTodo.completed=！myTodo.completed；
}
返回myTodo
})
})
};
deleteTodo=（id）=>{
这是我的国家({
todos:[…this.state.todos.filter（（myTodo）=>{
返回myTodo！==id
})]
})
}
render（）{
返回(
);
}
}

//retrievedtodos.js

class RetrivedTodos extends Component {
render () {
    return this.props.todos.map((retrivedTodos) =>(
        <TodosItems key={retrivedTodos.id} todos={retrivedTodos}
        markComplete={this.props.markComplete}
        deleteTodo={this.props.deleteTodo}
        />
    ))
}

类retrievedtodos扩展组件{
渲染（）{
返回此.props.todos.map（（retrievedtodos）=>(
))
}

}

//TodoItems.js

class TodosItems  extends Component {
getStrikeMark = () => {
    return {
        textDecoration:this.props.todos.Completed ? 'line-through': 'none'
    }
}
render () {
    const { id , title } = this.props.todos
    return (
        <div className='main-todos-div' style={this.getStrikeMark()}>
            <div className='todo-div'>
                <input type="checkbox" className='checkbox-round' 
                onChange={this.props.markComplete.bind(this,id)}/> 
                <span>{title}</span>
            </div>
            <div className='btn-div'>
                <button onClick={this.props.deleteTodo.bind(this,id)}>
                    <i className="fas fa-trash"></i>    
                 </button>
            </div>
        </div>
    )
}

类topositems扩展组件{
getStrikeMark=（）=>{
返回{
text装饰：this.props.todos.Completed？'line-through'：'none'
}
}
渲染（）{
const{id，title}=this.props.todos
返回(
{title}
)
}

} //标题

类头扩展组件{
渲染（）{
const date=新日期（）；
const todayDate=date.getDate（）；
const month=date.tolocalString（'default'，{month:'long'}）；
const year=date.getFullYear；
const day=date.toLocaleDateString（'default'，{weekday:'long'}）；
返回(
{todayDate}
{month}
{year}
{day}
)
}

}

这里有什么问题？它显示了这个错误

警告：函数作为子函数无效。如果 返回一个组件，而不是从“渲染”返回。或许 您的意思是调用此函数而不是返回它

---

提前感谢

检索ToDos

对我来说似乎无效。返回的是map函数而不是React组件。这个映射函数应该在返回值内部执行，而不是返回值本身

下面是它的外观：

class RetrivedTodos extends Component {
render () {
    return (
      <div>
        {this.props.todos.map((retrivedTodos) => (
          <TodosItems key={retrivedTodos.id} todos={retrivedTodos}
          markComplete={this.props.markComplete}
          deleteTodo={this.props.deleteTodo}
          />
        ))
       }
     </div>
   )
}

应该是：

const year = date.getFullYear();

---

检查沙盒链接：

标题组件有问题，应该是：

 const year = date.getFullYear();

而不是

 const year = date.getFullYear;

---

getFullYear是一个函数，这就是您出现错误的原因。

Headers组件代码缺失。Asutosh我也添加了header组件，您可以添加整个组件代码吗？好像导入丢失了我已经添加了我的答案，请检查下面请显示标题组件和完整的控制台日志。此处缺少代码，请检查我是否添加了标题。

 const year = date.getFullYear();

 const year = date.getFullYear;