reactjs - React 组件属性正在由连接和数据存储更新，但未显示

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 ...

标签： reactjsredux

Answer 1

请问这是什么原因造成的？

只是一个错字：

更改editMeal为editedMeal基于您的mapStateToProps()