javascript - react 传递新 Prop

Question

所以我在一个组件中更新我的状态，然后将新的 Prop 传递给 child ，但 child 没有正确更新并且输入的默认值没有改变。起初我认为这可能是因为我正在使用 this.props 所以开始使用 this.states 并首先在那里应用新 Prop 但似乎没有用。

父组件

this.state.newDetails == null ? '' : 
    <NewDetailsView details={this.state.newDetails} /> 

子组件:

import React, { Component } from 'react';

class NewDetailsView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: (this.props.details!= null) ? this.props.details: null
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ details: nextProps });
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.details.id} />
      </div>
    );
  }
}

export default NewDetailsView ;

解决方案代码:

待定...

Answer 1

问题在 componentWillReceiveProps 中:

this.setState({ details: nextProps });

应该是:

this.setState({ details: nextProps.details });

同时移除 this.forceUpdate(); ，这里不需要 forceUpdate

---

对第二个问题的建议将 defaultValue 更改为 value :

<input type="text" value={this.state.details.id} />

---

这是工作示例的链接:

https://stackblitz.com/edit/react-parent-child-prop