ReactJS传递Props异常：无法打印传入Props求技术排查

嘿，我帮你揪出两个关键问题，咱们一步步解决：

你在App组件外部定义了tasks数组，但你的组件state里只有error: null，根本没有tasks属性！所以你传给List组件的this.state.tasks其实是undefined。

解决方法有两种：

• 把tasks数组放进组件state里（推荐，方便后续更新任务列表）
• 直接传外部定义的tasks变量

修改后的App.js示例（二选一即可）：

// 方案1：把tasks放进state
import React from 'react';
import List from './Components/list';
import Input from './Components/input';

class App extends React.Component {
  constructor() {
    super();
    this.state = { 
      error: null,
      // 将tasks移入state
      tasks: [
        { name: 'task1', isComplete: false },
        { name: 'task2', isComplete: true },
        { name: 'task3', isComplete: false },
      ]
    }
  }

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

// 方案2：直接传外部tasks变量
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>
        {/* 直接传外部的tasks，而不是this.state.tasks */}
        <List taskList={tasks}/>
      </div>
    )
  }
}

React类组件的普通方法默认不会自动绑定this到组件实例，所以当你点击按钮时，this的指向并不是List组件，自然访问不到this.props。

推荐三种绑定方式，选你觉得顺手的就行：

方式1：Class Fields箭头函数（最简洁） #

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

class List extends React.Component {
  // 用箭头函数定义方法，自动绑定this到组件实例
  clickMe = () => {
    const passed = this.props.taskList
    console.log(passed);
  }

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

export default List;

方式2：构造函数内绑定 #

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

class List extends React.Component {
  constructor(props) {
    super(props);
    // 在构造函数里手动绑定this
    this.clickMe = this.clickMe.bind(this);
  }

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

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

export default List;

方式3：onClick内用箭头函数包裹 #

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

class List extends React.Component {
  clickMe() {
    const passed = this.props.taskList
    console.log(passed);
  }

  render() {
    return (
      <div>
        {/* 用箭头函数包裹，调用时this指向组件实例 */}
        <button onClick={() => this.clickMe()}>List Button</button>
      </div>
    )
  }
}

export default List;

解决完这两个问题，点击按钮就能正常打印出传入的taskList啦！

内容的提问来源于stack exchange，提问作者physicsboy