Reactjs 将道具作为React中的状态传递给子组件

我有一个列表，其中包含这个模态组件。如果用户单击列表中的某一行，则该行中的道具将向下传递到

模态组件

当道具被传递到模态时，我想调用

componentWillReceiveProps

来设置作为模态状态的一部分传递的道具。我这样做是因为像

标题

、

状态

和

成本

这样的道具最终将成为通过模态状态更新的受控输入

我唯一的问题是，

componentWillReceiveProps

只被调用一次，而props不会传递到Modal的状态。有没有办法将这些道具作为状态传递给子组件

我使用的是来自

父组件：

        <AdditionalPaymentsModal 
          status={'New'}
          id= {null} 
          title={'testong'}
          cost={''} />

子组件：

class AdditionalPaymentsModal extends Component {
  constructor(props){
    super(props);
    this.state = {
      showModal: this.props.showModal,
    };
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }

  componentWillReceiveProps(nextProps){  
    console.log("SETTING THE STATE", this.state);
      this.setState({
        id: nextProps.id,
        title:nextProps.title, 
        status: nextProps.status, 
        cost:nextProps.date
    })
  }

render(){
  const {id, title, status, cost} = this.props;

  return (
    <div>​
        <Button
          onClick={this.open}>
          Open
        </Button>
        <Modal show={this.state.showModal} onHide={this.close}>
          <Modal.Header closeButton>
            <Modal.Title>New Edit Cost</Modal.Title>
          </Modal.Header>
          <Modal.Body>
          {this.state.title}
          {this.state.id}
          {this.state.cost}
          {this.state.status}
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.close}>Cancel</Button>
          </Modal.Footer>
        </Modal>
      </div>
   );
  }
}

class AdditionalPaymentsModel扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showModal:this.props.showModal，
};
this.close=this.close.bind（this）；
this.open=this.open.bind（this）；
}
关闭（）{
this.setState（{showmodel:false}）；
}
开（）{
this.setState（{showmodel:true}）；
}
组件将接收道具（下一步）{
log（“设置状态”，this.STATE）；
这是我的国家({
id:nextrops.id，
标题：nextrops.title，
状态：nextrops.status，
费用：nextrops.date
})
}
render（）{
const{id，title，status，cost}=this.props；
返回(
​
打开
新编辑成本
{this.state.title}
{this.state.id}
{this.state.cost}
{this.state.status}
取消
);
}
}

看起来您并不是在修改传入的

道具

；如果您只是想显示它们，那么它们不需要处于

状态

您已经在

渲染

函数中初始化了道具：

const{id，title，status，cost}=this.props

您所需要做的就是引用这些-您的构造函数无需将它们置于
状态
：

render（）{
...
{title}
{id}
{成本}
{状态}
...
}
可以尝试将
此.setState（{id:props.id，title:props.title，status:props.status，cost:props.date}）放入
构造函数中，我想补充的不是
componentWillReceiveProps
，而是如果组件作为props接收这些值，那么就没有理由将它们设置为state，因为您很可能会将它们传递回修改时获取这些值的组件。您可以这样做，但它只是多余的，因为更改顶部的值将自动更新所有子项。@brycedorn我取出组件WillReceiveProps，然后在模态组件的super（props）下用您使用的替换它。我似乎没有在模式上生成任何内容：/n您确定
道具
传递正确吗？
console.log（props）
super（props）
下面的
super（props）
返回什么？@brycedorn好的，我在console.log（props）对象{状态：“新建”，id:null，标题：“测试通”，成本：}中仍然是空的，如果我需要更改它，这会有多大的不同？比如说，如果您希望
成本
可编辑，那么是的，您希望它处于
状态
。这是您希望在
构造函数中初始化的内容（与其他类函数一样，通过
this.setState
），然后通过state:
const{cost}=this.state，而不是通过props在
渲染中初始化它