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
    }
  }

请注意，对于＆＃34;任务来说任务是shorthand：任务＆＃34;。

如果您在渲染功能上console.log(this.state.tasks)，可以自行检查。

Answer 2

因为你没有在state.this.state.task中为taskList设置任何值，所以未定义。设置一些东西，你就能看到

使用ReactJS传递道具

2 个答案: