Question

我按照一些例子将函数作为prop传递。

父：

class BookList extends React.Component{
    updateBook(chosenBook){
        this.props.editBook(chosenBook); // redux func
    }

    render() {
        return ( 
            <div>
                {this.props.books.map((item, i) => (
                    <Book key={i} list={item} submitBook={this.updateBook(item)}></Book>
                ))}
            </div>;
        )
    }
}

子：

<Button onClick={() => {this.toggle; this.props.submitBook(this.props.list);}}>Save</Button>

我得到的是一个无限循环，我知道问题出在父组件，任何想法/其他方法吗？

Answer 1

因为您没有正确传递函数，所以传递了一个值。删除带有函数名称的()。

像这样写：

submitBook = {this.updateBook}

请参阅此片段中的差异：

function abc(){
   return 10;
}

console.log('without ()', abc);

console.log('with ()', abc());

注意：不要忘记在构造函数中绑定updateBook方法或使用箭头函数。

当作为道具反应传递函数时，无限循环

1 个答案: