Question

我有一个 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 && <DateTimePicker
                ...
                onChange={(event, selectedDate) => this.onChange(event, selectedDate)}>
        </DateTimePicker>}</>
        )
    }
}

<块引用>

我使用 lib 'DateTimePicker' 来选择日期并绑定 onChange 以更新上下文。这个选择器是一个模态。

所以当 DateTimePicker 的 onChange 函数被触发时出现警告。错误位于 setState 的 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.

你知道如何纠正这个错误吗？

编辑：

我使用了 UI Kitten 库中的 Modal 组件。我切换到 react native Modal，错误消失了。似乎错误来自图书馆。对不起

预先感谢您的帮助，西尔万

Answer 1

如果您正在使用类组件，您可以做的是将上下文更新 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 执行相同的操作。

Answer 2

我编辑了我的问题。错误最终似乎来自使用的库（ui kitten）。

React Native：更新上下文抛出“无法在现有状态转换期间更新”

2 个答案: