反応するネイティブ アプリがあり、カスタム コンテキストで Date を更新しようとしています。
テーマコンテキスト
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>
</>
);
}
}
私は単純に Date を持つ状態を持ち、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 をバインドしてコンテキストを更新します。このピッカーはモーダルです。
onChange
そのため、DateTimePicker の関数がトリガーされたときに警告が表示されます。エラーは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 コンポーネントを使用していました。反応ネイティブモーダルに切り替えると、エラーはなくなりました。エラーはライブラリから発生しているようです。ごめん
助けてくれてありがとう、シルヴァン