Блог

У меня есть приложение react native, и я пытаюсь обновить дату в пользовательском контексте.

Тематический текст

 export const ThemeContext = React.createContext({
    theme: 'dark',
    toggleTheme: () => { },
    date: new Date(),
    setDate: (date: Date) => { } 
});
 

Базовый контекст с датой и функцией для ее обновления

App.tsx

 export default class App extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      theme: 'dark',
      date: new Date()
    };
  }

  render() {
    const { theme, date } = this.state;
    const currentTheme = themes[theme];

    const toggleTheme = () => {
      const nextTheme = theme === 'light' ? 'dark' : 'light';
      this.setState({ theme: nextTheme });
    };

    const setDate = (date: Date) => {
      // ERROR is raised HERE
      this.setState({date: date});
    }

    return (
      <>
        <IconRegistry icons={EvaIconsPack} />
        <ThemeContext.Provider value={{ theme, toggleTheme, date, setDate }}>
          ...
        </ThemeContext.Provider>
      </>
    );
  }
}
 

Я просто задаю состояние с датой и создаю функцию setDate. Я включил свое приложение в контекстный провайдер.

Средство выбора

 class PickerContent extends React.Component<{}, ContentState> {
    static contextType = ThemeContext;

    constructor(props: {} | Readonly<{}>) {
        super(props);
        let currentMode = 'date';
        let show = false;

        if (Platform.OS === 'ios') {
            currentMode = 'datetime';
            show = true;
        }

        this.state = {
            date: new Date(),
            mode: currentMode,
            show: show
        };
    }

    setMode(currentMode: string) {
        this.setState({ mode: currentMode, show: true });
    };

    onChange(_event: any, selectedDate: Date) {
        const currentDate = selectedDate || this.state.date;
        // I update the context here
        this.context.setDate(currentDate);
        
        this.setState({date: currentDate, show: Platform.OS === 'ios'})
    }

    render() {
        const {show, date, mode } = this.state;
        const color = 'dark';

        return (
            <>
            ...
            {show amp;amp; <DateTimePicker
                ...
                onChange={(event, selectedDate) => this.onChange(event, selectedDate)}>
        </DateTimePicker>}</>
        )
    }
}
 

Я использую библиотеку ‘DateTimePicker’, чтобы выбрать дату и привязать onChange для обновления контекста. Этот сборщик находится на модальном.

Таким образом, предупреждение появляется, когда onChange запускается функция DateTimePicker . Ошибка находится в setState of App.tsx (в setDate)

Warning: Cannot update during an existing state transition (such as within 'render'). Render methods should be a pure function of props and state.

Знаете ли вы, как исправить эту ошибку?

Редактировать :

Я использовал модальный компонент из библиотеки пользовательского интерфейса Kitten. Я переключаюсь на модальный режим react native, и ошибка исчезла. Похоже, что ошибка исходит из библиотеки. извините

заранее благодарю вас за помощь, Сильвен

Если вы используете компонент класса, что вы можете сделать, так это переместить контекстное обновление fn внутрь componentDidUpdate . Вы просто сравниваете свои состояния, если ваше состояние изменилось, вы обновляете свой контекст новым значением. Что-то вроде:

 componentDidUpdate(prevProps, prevState) {
  if (prevState.date !== this.state.date) {
    this.context.setDate(this.state.date);
  }
}

onChange(_event: any, selectedDate: Date) {
    const currentDate = selectedDate || this.state.date;
    
    this.setState({date: currentDate, show: Platform.OS === 'ios'})
}
 

Таким образом, вы не обновляете свой контекст во время рендеринга.

Если вы реорганизуете этот компонент в функциональный, вы сможете сделать то же самое, используя useEffect .

Я отредактировал свой вопрос. Ошибка, наконец, кажется, исходит из используемой библиотеки (ui kitten).