Question

我正在将状态从一个组件传递到另一组件。但是，当父组件中的状态更新时，子组件不会更新。我的下面的代码中我在做错什么吗？

如下所示，在 Patient.JS 中，我将状态传递给 AddPatient.JS 。但是，当我在 Patient.JS 中更新年龄状态时，就不会在 AddPatient.JS 中更新年龄状态。

我该如何处理？

Patient.JS

impressions.impressionType='container'

添加患者

state = {
    info = {
    age = '',
    name = ''
    }
}
handle_age(event)
   {
      this.setState({ age:event.target.value}, () => {
         console.log('age', this.state.age)


  <Modal>
   <ModalHeader>
   </ModalHeader>
    <ModalBody>
    <AddPatient
    addNewPatient = {this.state.info}
    />                      
   </ModalBody>
   <ModalFooter>
   <Button  variant="contained" className="text-white" onClick={() => this.addPatient()}>Save</Button>    
    </ModalFooter>
    </Modal>

Answer 1

为此替换您的handle_age函数：

handle_age(event)
   {
      let info = {...this.state.info}
      info.age = event.target.value
      this.setState({
          info: {...info}
      })
   }

说明：更新组件时，React JS对state键和值进行浅检查。这意味着它会在键/值对更改或更新时检测到更改，但是不会检测到state中深层嵌套对象的更改。示例：

this.state = {
    visible: true,
    users: {
      {
      id: 1,
      name: 'john'
      },
      {
      id: 2,
      name: 'doe'
      }
    }

在上面的代码中，React将检测到visible键中的更改，但不会检测到users对象中的更改，因为它是一个深度嵌套的对象。

现在，由于您仅使用患者的年龄，只需将年龄设为patientAge={this.state.info.age}并直接使用。

Answer 2

您将状态作为道具传递给子组件，因此您现在进入了何时更改道具会触发重新渲染的概念。

如果prop是原始值（例如字符串或整数等），它将在每次更改值时重新呈现。

如果道具是数组或在您的示例中是对象，则仅当该对象或数组有新的引用时，才会导致重新渲染

仅感知物体的一种属性变化，并对状态和道具进行比较浅的反应，改变“年龄”不会触发孩子的投降。

您可以这样做：

每次将setState设置为完整信息，这将更改其引用并触发子项的重新呈现

或

分别将年龄和姓名作为您孩子部分的道具

根据我的观察，您仅在孩子部分使用年龄，所以我建议选择2

像这样：

<AddPatient
 addNewPatient={this.state.info.age}
/>  



const AddProduct = ({ addNewPatient}) => (
                  <FormGroup>
                       <Label for="className">Age</Label>
                       <Input
                     type="number" 
                     name="sub_total"
                     id="sub_total"
                     placeholder=""
                     value = {addNewPatient}
                     />
                   </FormGroup>

       );

Answer 3

在处理程序中，您将输入值分配给state.age而不是state.info.age内

handle_age(event) {
  const age = event.target.value;
  this.setState(prevState => ({ 
    info: { ...prevState.info, age }
  }), console.log('age', this.state.info.age);
}

状态未在子组件中更新-react js

3 个答案: