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();

问题是更新功能不会重新呈现我在父页面上更新的内容。据我所知，每当调用setState时，也会调用render。 render（）确实被调用了，但它似乎没有显示更新的值 - 为什么这样，我该如何解决？

我想这可能与它来自儿童成分的事实有关吗？

我已经尝试过forceUpdate，但它也没有重新渲染组件 - 我缺少什么？

Answer 1

尝试避免 this.forceUpdate（） ，因为这不会触发 shouldComponentUpdate（） 这是一种表现React中的组件钩子。因为，我看到你正在将你的状态传递给子组件并试图从那里更新父状态对象，这违反了法律。您应该在父级中创建一个方法，并将该方法作为prop组件传递给子组件。看起来应该是这样的

Get-ChildItem | where {$_.PsIsContainer} | ForEach-Object { Write-Host $_.Name ; tf workfold /cloak $_.Name }

Answer 2

我只是在这里猜测，但我认为你在构造函数中设置子组件的初始值，以及你希望它将值反映到它自己的状态而不是父状态的值

Answer 3

我需要先将状态设置为加载，然后当我将其设置为loading = false时，它将重新呈现该页面

this.setState({
      loading:true
    });    

//...Do the work

this.setState({
      loading:false
    });

React传递函数给子父不重新渲染

3 个答案: