javascript - React 传递新的 props

Question

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

父组件

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

还有 remove this.forceUpdate();，这里不需要forceUpdate。

---

将第二个问题更改defaultValue为只是value：

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

---

这是工作示例的链接：

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

Answer 2

const NewDetailsView = ({details}) => (
  <div>
    <input type="text" value={details? details.id: null} />
  </div>
);

Answer 3

使用getDerivedStateFromProps而不是使用 deprecated componentWillReceiveProps。它的一个例子可以在这里找到

Answer 4

Answer 5

defaultValue仅适用于初始负载。您应该控制输入并使用道具来获取价值（不需要 setState）。

反应传递