React函数组件props传递函数指针失败，普通值正常问题咨询

这是个很容易踩的React Hooks小坑！问题根源在useState的参数规则上：

当你给useState传递函数类型的值时，React会把它当作「初始化函数」——自动调用这个函数，并将函数的返回值作为state的初始值。你的props.func1和props.func2都是函数，所以useState(props.func1)相当于执行了props.func1()，而这两个函数执行后都返回undefined，自然state里的func1和func2就变成了undefined！

而props.xxx是字符串类型，不是函数，所以useState直接把它作为初始值，完全正常。

修复代码 #

只需要把函数类型的初始值用一个包裹函数包起来，让useState执行这个包裹函数，返回你想要的原函数本身即可：

const {useState} = React;
function DragAndDropArena(props) {
  // 用包裹函数返回原函数，避免useState自动执行它
  const [func1] = useState(() => props.func1);
  const [func2] = useState(() => props.func2);
  const [xxx] = useState(props.xxx);
  
  console.log(props.func1); // 正常输出函数
  console.log(xxx); // 123，符合预期
  console.log(func1); // 现在能正常拿到函数了！
  console.log(func2); // 同样正常拿到函数！
  
  return <div>AA</div>
}

class App extends React.Component {
  func1 = () => {} // 箭头函数已自动绑定this
  func2() {}
  render() {
    return (
      <DragAndDropArena func1={this.func1} func2={this.func2} xxx='123' />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

额外提醒 #

你的App类里的func2是普通类方法，没有绑定this，如果之后在子组件里调用func2，大概率会出现this指向错误的问题。建议改成箭头函数，或者传递时用this.func2.bind(this)，也可以在构造函数里提前绑定。

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