React将函数传递给子父级而不是重新呈现

Question

我有以下功能：

update() {
    this.currentItem = [];
    //...Populate currentItem

    this.setState({
      currentItem
    });
  }

在页面上呈现如下；

render() {
   const { currentItem } = this.state;
   return {currentItem}
}

<Component
   update={this.update.bind(this)}
/>

let { update } = this.props;
if (typeof update === "function")
  update();

我已经尝试了forceUpdate，但它也没有重新呈现组件--我遗漏了什么？

Answer 1

尝试避免这样做。forceUpdate()，因为这不会触发shouldComponentUpdate()，这是React中组件的性能挂钩。因为，我看到您正在将您的状态传递给子组件，并试图从那里更新父级状态对象，这违反了法律。您应该在父组件中创建一个方法，并将该方法作为道具传递给子组件。应该是这样的

constructor(props) {
    super(props);
    this.state = { loading: false };
    this.update = this.update.bind(this);
}
update(newState) {
    this.setState({loading: newState })
}
render() {
    return <ChildComponent update={this.update} />
}