Question

在使用React和Redux工具调试以下组件时，我看到商店正在正确更新，并且内部相关属性“ meals”正在使用正确的数据更新，但是该组件并未在屏幕上更新。

class MealEditView extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editedMeal: this.props.editedMeal };
    this.resetValuesForDisplay = this.resetValuesForDisplay.bind(this);
  }

  resetValuesForDisplay(editedMeal) {
    editedMeal = editedMeal !== undefined ? editedMeal : new Meal();
    let meal = new Meal();
    meal.calories = editedMeal.calories !== undefined ? editedMeal.calories : '';
    meal.description = editedMeal.description !== undefined ? editedMeal.description : '';
    meal.date = editedMeal.date !== undefined ? editedMeal.date : '';
    return meal;
  }

  render() {
    return (
      <>
        <Card className="side-form d-none">
          <CardHeader>
            <CardTitle tag="h4">Horizontal Form</CardTitle>
          </CardHeader>
          <CardBody>
            <Form className="form-horizontal">
              <Row>
                <Label md="3">Title</Label>
                <Col md="9">
                  <FormGroup>
                    <Input
                      placeholder="Title"
                      type="text"
                      value={this.props.editMeal !== undefined ? this.props.editedMeal.title : ''}
                    />
                  </FormGroup>
                </Col>
              </Row>
              <Row>
                <Label md="3">Calories</Label>
                <Col md="9">
                  <FormGroup>
                    <Input
                      placeholder="Calories"
                      type="number"
                      key={this.props.editMeal !== undefined ? this.props.editedMeal.calories : ''}
                      value={this.props.editMeal !== undefined ? this.props.editedMeal.calories : ''}
                    />
                  </FormGroup>
                </Col>
              </Row>
              <Row>
                <Label md="3">Date</Label>
                <Col md="9">
                  <FormGroup>
                    <Input
                      type="text"
                      autoComplete="off"
                      value={this.props.editMeal !== undefined ? this.props.editedMeal.date : ''}
                    />
                  </FormGroup>
                </Col>
              </Row>
              <Row>
                <Col md="3" />
                <Col md="9">
                  <FormGroup check>
                    <Label check>
                      <Input type="checkbox" />
                      <span className="form-check-sign" />
                      Remember me
                    </Label>
                  </FormGroup>
                </Col>
              </Row>
            </Form>
          </CardBody>
          <CardFooter>
            <Row>
              <Col md="3" />
              <Col md="9">
                <Button className="btn-round" color="info" type="submit">
                  Sign in
                </Button>
              </Col>
            </Row>
          </CardFooter>
        </Card>
      </>
    );
  }
}

const mapStateToProps = storeData => ({
  editedMeal: storeData.meals.editedMeal,
});

const mapDispatchToProps = {};

const connectedMealsTable = connect(
  mapStateToProps,
  mapDispatchToProps,
)(MealEditView);
export default connectedMealsTable;

还有减速器：

export const DietActionReducer = (storeData, action) => {
  switch (action.type) {
    // case DIET_ACTION_TYPES.MEAL_ADD: {
    //     let newStoreData = {...storeData};
    //     let meals = newStoreData['meals'];
    //     meals[action.payload.meal.getId()] = action.payload.meal;
    //     break;
    // }
    case DIET_ACTION_TYPES.MEAL_EDIT: {
      let newStoreData = { ...storeData };
      let editedMeal = storeData.dataTable.find(meal => meal.id === action.payload);
      newStoreData.editedMeal = editedMeal;
      return newStoreData;
    }
    default:
      return storeData || {};
  }
};

这是什么原因引起的？

很抱歉，有很多代码-大多数只是HTML ...

Answer 1

这是什么原因引起的？

只是一个错字：

根据您的editMeal将editedMeal更改为mapStateToProps()

Answer 2

在this.props.editMeal方法中将this.props.editedMeal替换为render()。
对于此行this.state = { editedMeal: this.props.editedMeal };
如果需要，请使用UNSAFE_componentWillreceiveprops()道具更新时更新状态，但是这里不需要使用它，因为您正在使用redux。

通过连接和数据存储更新React组件属性，但不显示

2 个答案: