如何在react中传递方法作为元素的道具

Question

当我想将函数传递到react中的函数组件中时，我遇到了一个错误。问题出在哪里？

import React, { Component } from 'react';
import Person from './Person/Person';

import './App.css';

class App extends Component {
  state = {
    person: [
      { namd: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }

  swichNameHandler = (newName) => {
    this.setState({
      person: [
        { name: newName, age: 37 },
        { name: "Mohsen", age: 49 }
      ]
    })
  }
  render() {
    return (
      <div className="App">
        <h1>this is react</h1>
        <button onClick={this.swichNameHandler.bind(this, "ehsan")}>Click Here</button>
        <Person
          name={this.state.person[0].name}
          age={this.state.person[0].age}
          click={this.swichNameHandler} />
        <Person
          name={this.state.person[1].name}
          age={this.state.person[1].age}
          click={this.swichNameHandler}> he is my brother.</Person>
      </div>
    );
  }
}

导出默认应用程序；

import React from 'react';

//Create a new Component
const person = (props) => {
    return (
        <div>
            <p onClick={props.click}> My name is {props.name} and I am {props.age} years old.</p>
            <p>{props.children}</p>
        </div>
    )
}

export default person; 

这是我点击p元素时出现的错误：

React-dom.development.js：57未捕获错误：对象作为React子级无效（找到：具有键{dispatchConfig,_TargetInst,_DispatchListeners,_DispatchInstances,nativeEvent,type,target,currentTarget,eventPhase,bubbles,cancelable,timeStamp,defaultPrevented,isTrusted,view,detail,screenX,screenY,clientX,clientY,pageX,metaKey,ctrlKey,shiftKey,altKey,

如果要呈现子级集合，请改用数组。

Answer 1

我认为您的状态中有错误，其中Person[0]应该是“name”，但您写了“namd”，这导致Person[0].name未定义，因此抛出错误

 state = {
    person: [
      { namd: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }

应该是

 state = {
    person: [
      { name: "Ehsan", age: 36 },
      { name: "Mosen", age: 48 }
    ]
  }