使用父组件将初始值传递给子组件，而不依赖于状态 ReactJS答案

【问题标题】：Use parent component to pass initial value to child without relying on state ReactJS使用父组件将初始值传递给子组件，而不依赖于状态 ReactJS
【发布时间】：2020-10-28 17:18:33
【问题描述】：

我有一个父组件 A，它为他的子组件 B 计算一些初始值。实际上，我在组件 A 的 componentDidMount() 中计算初始值，并通过 props 将其传递给 B：

<ComponentB initialValue={this.state.value} handleChange={this.handleChange}/>

在组件 B 中我会这样做

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

在这之后，组件 B 应该独立管理他的状态。但是每次它的值发生变化时，我都希望它更新 A 的状态，但信息更少。

在组件 B 中：

const onChange = (event) => { 
      this.setState({value: event.target.value + "only in B"});
      this.props.handleChange(this.state.value);
}

在组件A中：

const handleChange = (value) => { 
      this.setState({value: value});
}

问题是 A 总是有最后一个单词，而 B 中的值不保留“only in b”后缀。 A 再次渲染时，通过 initialValue props 将 B 的 state 值重置为他的内部 state 值。

所以基本上，我想做的是在第一次渲染时从 A 继承初始值，然后在 B 发生变化时更新 A 状态而不擦除 B 的状态。

【问题讨论】：

这并不能完全回答您的问题，但我想说的是，您尝试做的事情与 React 中数据自然流动的方式背道而驰，这就是您苦苦挣扎的原因。一般来说，父组件应始终将最新和最新的信息传递给它的子组件，并处理该数据的管理。如果它是父级根本不使用的数据并且非常本地化给子级，那么数据永远不应该被传递，它应该作为状态起源于子级。
至于你的问题本身，父母的任何变化都会导致孩子重新渲染，这将用现在已经修改的道具覆盖孩子的当前状态。解决此问题的唯一方法是以我上面列出的方式之一改变您的方法，可能是将数据的来源转移到孩子身上。
@Reifocs：您的代码没有明显错误。发布父组件和子组件的完整示例以查看是否还有其他事情可能会有所帮助。您可能出于某种原因重新安装孩子，这会重置状态。

标签： javascript reactjs

【解决方案1】：

嘿，如果我理解正确的话，你可能会做得更好，但我认为你可以通过使用来实现你想要的：

this.props.value

在 B 组件上：

<input defaultValue={this.props.value} onChange={this.onChange}/>

然后当您处理更新时，只需将 event.target.value 传递给父级（A 组件）

我不能 100% 确定这是否是您所要求的，但这里是示例：

https://codepen.io/pegla/pen/qBNxqBd?editors=1111

【讨论】：

【解决方案2】：

父组件的任何更改都会触发子组件的重新渲染。我相信适合您情况的最佳方法是在从 A 继承初始值之后，为 B 组件设置一些局部状态变量以专门管理该状态，使其与 A 分开。

【讨论】：