Javascript 反应：为什么子组件不'；道具更改时不更新

为什么在下面的伪代码示例中，当容器更改foo.bar时，子对象不重新呈现

Container {
  handleEvent() {
    this.props.foo.bar = 123
  },

  render() {
    return <Child bar={this.props.foo.bar} />
}

Child {
  render() {
    return <div>{this.props.bar}</div>
  }
}

容器{
handleEvent（）{
this.props.foo.bar=123
},
render（）{
返回
}
孩子{
render（）{
返回{this.props.bar}
}
}

---

即使我在修改容器中的值后调用

forceUpdate（）

，子对象仍会显示旧值。

因为如果父对象的属性更改，但其状态更改，子对象不会重新渲染：）

您展示的是：

它将通过道具将数据从父级传递到子级，但没有重新渲染逻辑

您需要为父级设置一些状态，然后在父级更改状态时重新渲染子级。 这可能会有所帮助。

---

因为如果父级的道具更改，但其状态更改，则子级不会重新播放：）

您展示的是：

它将通过道具将数据从父级传递到子级，但没有重新渲染逻辑

您需要为父级设置一些状态，然后在父级更改状态时重新渲染子级。 这可能会有所帮助。

---

您应该使用

设置状态

功能。否则，状态将不会保存您的更改，无论您如何使用forceUpdate

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

容器{
handleEvent=（）=>{//使用箭头函数
//this.props.foo.bar=123
//您应该使用setState设置如下值：
this.setState（{foo:{bar:123}）；
};
render（）{
返回
}
孩子{
render（）{
返回{this.props.bar}
}
}
}

---

您的代码似乎无效。我无法测试此代码。

您应该使用

设置状态

功能。如果无效，状态将不会保存您的更改，无论您如何使用forceUpdate

Container {
    handleEvent= () => { // use arrow function
        //this.props.foo.bar = 123
        //You should use setState to set value like this:
        this.setState({foo: {bar: 123}});
    };

    render() {
        return <Child bar={this.state.foo.bar} />
    }
    Child {
        render() {
            return <div>{this.props.bar}</div>
        }
    }
}

容器{
handleEvent=（）=>{//使用箭头函数
//this.props.foo.bar=123
//您应该使用setState设置如下值：
this.setState（{foo:{bar:123}）；
};
render（）{
返回
}
孩子{
render（）{
返回{this.props.bar}
}
}
}

---

您的代码似乎无效。我无法测试此代码。

根据React哲学，组件无法更改其道具。它们应该从父级接收，并且应该是不可变的。只有父级可以更改其子级的道具

很好的解释

---

另外，请根据React philosophy component can not change其道具，阅读此线程。这些道具应该从父级接收，并且应该是不可变的。只有父级可以更改其子级的道具

很好的解释

另外，阅读此线程，并使用setState函数。 所以你可以

       this.setState({this.state.foo.bar:123}) 

在handle事件方法内部

状态更新后，将触发更改，并重新渲染。

使用setState函数。 所以你可以

       this.setState({this.state.foo.bar:123}) 

在handle事件方法内部

---

更新状态后，它将触发更改，并将进行重新渲染。

更新子级以使属性“key”等于名称。每次键更改时，组件都将重新渲染

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Child{
render（）{
返回{this.props.bar}
}
}

更新子级，使属性“key”与名称相等。每次key更改时，组件都将重新呈现

Child {
  render() {
    return <div key={this.props.bar}>{this.props.bar}</div>
  }
}

Child{
render（）{
返回{this.props.bar}
}
}

我也有同样的问题。 这是我的解决方案，我不确定这是否是好的做法，如果不是，请告诉我：

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD：现在，您可以使用React挂钩执行相同的操作： （仅当组件是函数时）

我也有同样的问题。 这是我的解决方案，我不确定这是否是好的做法，如果不是，请告诉我：

state = {
  value: this.props.value
};

componentDidUpdate(prevProps) {
  if(prevProps.value !== this.props.value) {
    this.setState({value: this.props.value});
  }
}

UPD：现在，您可以使用React挂钩执行相同的操作： （仅当组件是函数时）

---

如果子组件不维护任何状态，只需呈现道具，然后从父组件调用它，那么您可能应该将其作为功能组件。另一种选择是，您可以将挂钩与功能组件（useState）一起使用，这将导致无状态组件重新呈现

此外，您不应该更改PROPA，因为它们是不可变的。请维护组件的状态

Child = ({bar}) => (bar);

---

如果子组件不维护任何状态，只需呈现道具，然后从父组件调用它，那么您可能应该将其作为功能组件。另一种选择是，您可以将挂钩与功能组件（useState）一起使用，这将导致无状态组件重新呈现

此外，您不应该更改PROPA，因为它们是不可变的。请维护组件的状态

Child = ({bar}) => (bar);

---

确认了，添加了一个关键点。我浏览了文档，试图了解原因

React希望在创建子组件时效率更高。如果新组件与另一个子组件相同，它将不会呈现新组件，这会加快页面加载速度

添加关键点将对渲染新组件作出反应，从而重置该新组件的状态

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

---

确认了，添加了一个关键点。我浏览了文档，试图了解原因

React希望在创建子组件时效率更高。如果新组件与另一个子组件相同，它将不会呈现新组件，这会加快页面加载速度

添加关键点将对渲染新组件作出反应，从而重置该新组件的状态

function mapStateToProps(state) {
  return {
    chanelList: state.messaging.chanelList,
  };
}

export default connect(mapStateToProps)(ChannelItem);

---

我遇到了同样的问题。 我有一个

Tooltip

组件正在接收

showTooltip

道具，我正在基于

if

条件在

Parent

组件上更新它，但是

Tooltip

组件没有呈现

const Parent = () => {
   let showTooltip = false;
   if(....){ showTooltip = true; }
   return(
      <Tooltip showTooltip={showTooltip}></Tooltip>
   )
}

---

我也遇到了同样的问题。 我有一个

Tooltip

组件正在接收

showTooltip

道具，我正在根据

if

条件更新

Parent

组件，它在

Parent

comp中得到更新

setLoading(true);
handleOtherCPUHeavyCode();

setLoading(true);
setTimeout(() => { handleOtherCPUHeavyCode() }, 1)

<Child
    key={JSON.stringify(props)}
/>

componentWillReceiveProps({bar}) {
    this.setState({...this.state, bar})
}