反应 |函数内部的 this.props.function 不会被调用答案

【问题标题】：React | this.props.function inside a function will not be called反应 |函数内部的 this.props.function 不会被调用
【发布时间】：2021-04-12 12:41:58
【问题描述】：

我正在处理一个包含两个组件的 React 和 MaterialUI 清单，一个包含数据，另一个编辑它，但是出现了调用函数 (handleDeleteChip()) 传递的问题on with props，不会被执行。

父组件：

export default class CheckList extends React.Component {
constructor() {
    super();
    this.state = {
        taskData: {}
    }

 this.handleDeleteChip = this.handleDeleteChip.bind(this)


 handleDeleteChip = (chipToDelete) => () => {
    let obj = this.state.taskData
    delete obj[chipToDelete]
    this.setState({taskData: obj})
};

render() {
    return (
        <div>
            {
                <AddToDoComponent handleDeleteChip={this.handleDeleteChip}/>
            }
        </div>

子组件：

class AddToDoComponent extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        chipData: props.taskData,
        updateCondition: true
    }
    this.deleteHandler = this.deleteHandler.bind(this)
}
deleteHandler(chipToDelete){
    this.props.handleDeleteChip(chipToDelete)
}

【问题讨论】：

你能展示你如何在 child 中使用函数 deleteHandler 吗？
你确定它没有被调用吗？在我看来，假设它被调用，它不会导致重新渲染，因为你正在直接改变状态。
@Arthur const chip = (<div> {Object.keys(this.state.chipData).map((k, i) => ( <p key={i}> <Chip style={{float: "left", margin: 5}} label={k} onDelete={() => {this.deleteHandler({k})}} /> </p> ))} </div>)

标签： javascript reactjs react-router material-ui

【解决方案1】：

handleDeleteChip的定义应该是：

handleDeleteChip(chipToDelete) {
    let obj = this.state.taskData
    delete obj[chipToDelete]
    this.setState({taskData: obj})
};

或者如果您使用的是功能组件

const handleDeleteChip = (chipToDelete) => {
    ....
};

另外，父渲染中的方括号 ({}) 也不需要。希望对您有所帮助！

【讨论】：

【解决方案2】：

尝试从prop值绑定this。

export default class CheckList extends React.Component {
constructor() {
    super();
    this.state = {
        taskData: {}
    }

 //Remove: this.handleDeleteChip = this.handleDeleteChip.bind(this)


 handleDeleteChip = (chipToDelete) => () => {
    let obj = this.state.taskData
    delete obj[chipToDelete]
    this.setState({taskData: obj})
};

render() {
    return (
        <div>
            {
                <AddToDoComponent handleDeleteChip={this.handleDeleteChip.bind(this)}/>
            }
        </div>

【讨论】：