React Native-从父组件重新渲染子组件

我正在尝试修改日历- https://github.com/wix/react -native-calendars ，这样当我按一天时，背景和文字的颜色会在该天发生变化。我读到要重新渲染组件，您需要更新父组件的状态，这就是我要尝试的：

I am trying to modify a calendar - https://github.com/wix/react-native-calendars so that when I press a day, the background and text colors change for that day. I read that to re-render a component you need to update the state of the parent component, so that is what I am trying:

Parent.js

Parent.js

export default class InitiateRent extends Component {
  state = {
    ....
    this.markedDays: {},
    someVar: 0
  };

  constructor() {
    super(); 
    this.handler = this.handler.bind(this);
    this.markedDays = {};
  }

  ....

  handler(e) {
    console.log('handler running');
    this.setState({
      someVar: 123
    })
  }

  <Calendar 
    handler={this.handler}
    markedDates={this.markedDays}
    onDayPress={(day)=> {
      console.log('selected day', day);

      var dateString = `'${day.year}-${day.month}-${day.day}'`

      var addDate = {
        [dateString]: {
          customStyles: {
            container: {
              backgroundColor: '#6de3dc',
            },
            text: {
              color: 'white',
              fontWeight: 'bold'
            },
          },
        }
      }

      this.markedDays = Object.assign(addDate, this.markedDays);

      console.log(this.markedDays);
    }}

....

Child.js

pressDay(date) {
    this.props.handler();
    this._handleDayInteraction(date, this.props.onDayPress);
}

renderDay(day, id) { //GETS CALLED IN CHILD RENDER METHOD VIA AN INTERMEDIARY
    ....
        <DayComp
          ....
          onPress={this.pressDay}
          ....
}

除了我没有得到预期的结果外，所有功能都正常运行-当我按日历上的日期时，处理程序将触发，状态会发生变化，并且在控制台中我的对象看起来是正确的：

Everything functions correctly except I don't get the expected result - when I press a date on the calendar, the handler fires, the state changes, and in the console my object looks correct:

Object

'2018-9-23': {customStyles: {container: {backgroundColor: "#6de3dc"}, text: {color: "white", fontWeight: "bold"}}}

'2018-9-26': {customStyles: {container: {backgroundColor: "#6de3dc"}, text: {color: "white", fontWeight: "bold"}}}

'2018-9-28': {customStyles: {container: {backgroundColor: "#6de3dc"}, text: {color: "white", fontWeight: "bold"}}}

'2018-9-29': {customStyles: {container: {backgroundColor: "#6de3dc"}, text: {color: "white", fontWeight: "bold"}}}

但是日历上一天的背景没有改变，文本也没有改变-我必须怎么做才能使其重新呈现（更改）？

But the background of the day on the calendar doesn't change, neither does the text - what do I have to do to get it to re-render (change)?

更新

我从一开始就创建了一系列处理程序底部的 day 组件，仅代表日历上的一天，一直到最高顺序的父视图（不是App.js，而是在其下方），但仍然没有执行任何操作。

I created a chain of handlers all the way from the very bottom day component which represents just a day on the calendar all the way up to the highest order parent view (not App.js, but just below it) and that still did nothing.

更新

日历是模态的，我不知道

The calendar is on a modal, and I don't have any handler on that updating it's state, could that be the problem?

UPDATE

我在文档中发现了这一点：

I found this in the docs:

！免责声明！确保markedDates参数是不可变的。如果您
更改了markedDates对象的内容，但是对它的引用没有
的更改，则不会触发日历更新。

!Disclaimer! Make sure that markedDates param is immutable. If you change markedDates object content but the reference to it does not change calendar update will not be triggered.

这是什么意思？

更新

我试图解释什么这意味着对某些Google搜索来说，这是否会使 this.state.markedDays 不可变？：

I tried to interpret what that meant with some google searches, does this make this.state.markedDays immutable?:

                const markedDays = this.state.markedDays;

                var dateString = `'${day.year}-${day.month}-${day.day}'`;

                var addDate = {
                  [dateString]: {
                    customStyles: {
                      container: {
                        backgroundColor: '#6de3dc',
                      },
                      text: {
                        color: 'white',
                        fontWeight: 'bold'
                      },
                    },
                  }
                }

                const markedDaysHolder = {
                  ...markedDays,
                  ...addDate
                }

                this.state.markedDays = markedDaysHolder;

更新

我输入：

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log("componentDidUpdate in InitiateRent:", prevProps, prevState, snapshot);
}

上面的输出是：

componentDidUpdate in InitiateRent: (3) (index.bundle, line 761)

{initiateRentMessage: function, modalHeight: 200, modalWidth: 200, handler: function}

{modalVisible: true, message: "Hi, I would like to rent an item from you.", rentButtonBackground: "#6de3dc", someVar: 123, markedDays: Object}

undefined

我可以看到状态对象在此输出中，每按一次按钮，markedDays 就会变大，为什么样式没有更改？

I can see the state object markedDays getting bigger with each button press from this output, why isn't the style changing?

在所有相关组件中，我注意到

In all the relevant components, and I noticed it doesn't fire on the lowest order component, which is the one that needs to change.