使用ReactJS传递道具

Question

这似乎是一个愚蠢而明显的问题,但我似乎无法让我的道具工作......

任何人都可以告诉我为什么我不能得到我传递道具的console.log？

当然,我稍后会想要做更复杂的功能,但我想我会尝试先找出基础知识而不仅仅是复制YOUTUBE TUTORIAL

App.js

import React from 'react';
import List from './Components/list';
import Input from './Components/input';

const tasks = [
  { name: 'task1', isComplete: false },
  { name: 'task2', isComplete: true },
  { name: 'task3', isComplete: false },
]

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      error: null
    }
  }

  render() {
    return (
      <div>
        <List taskList={this.state.tasks}/>
      </div>
    )
  }

list.js

import React from 'react';
import ListBody from './ListComponents/list-body';
import ListHeader from './ListComponents/list-header';

class List extends React.Component {

  clickMe() {
    var passed = this.props.taskList
    console.log(passed);
  }

  render() {
    return (
      <div>
        <button onClick={this.clickMe}>List Button</button>
      </div>
    )
  }

}

export default List;

Answer 1

你没有任务状态,所以你传递了一个未定义的道具.

constructor() {
    super();
    this.state = {
      error: null,
      tasks
    }
  }

请注意,任务是"任务:任务" 的简写.

如果您console.log(this.state.tasks)使用渲染功能,可以自己检查.