小编pet*_*ete的帖子

我使用 Next.js 13 和 Prisma ORM 来获取服务器组件中的数据，并通过上下文将其提供给子组件。路由的结构如下：/item/[id]，并且在layout.tsx文件中使用id来获取数据。

初始页面加载时，将获取数据并通过上下文供所有子组件访问。但是，在修改上下文中的数据（并通过 API 调用在数据库中更新数据）时，我遇到了问题。当导航到新页面然后返回上一页时，将显示初始加载的旧数据。服务器端函数getChildItems应在每次页面加载时执行，仅在页面刷新时运行，而不是在来回导航期间运行。我可以在进行更改时使用router.refresh()，next/navigation但我认为这不是最佳选择。

由于这是一个服务器组件，我无法使用像 useEffect 这样的钩子。可以从 api 获取客户端组件中的数据，但如果可能的话，我想在服务器上呈现页面。

这是我的layout.tsx：

import { Item } from "@prisma/client";
import { ListProvider } from "~/context/list-context";
import { db } from "~/lib/db"; // Prisma ORM database connection

// This should run every time when navigating to /items/[id] but currently runs only on page refresh
async function getChildItems(itemId: Item["id"]) {
  return await db.item.findMany({
    where: {
      parent_id: itemId,
    },
  });
}

export …

我有两个屏幕，想将状态从一个传递到另一个。

简化屏幕 1：

import React, { Component } from 'react';
import { View, TextInput} from 'react-native';
import { buttons } from '../../components/buttons/Buttons';

export default class LoginScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      username: '',
    }
  }

  render() {
    return(
      <View>
       ...
        <TextInput onChange={(input) => this.setState({username: input})}></TextInput>
        ...
        <Button.main onPress={() => this.props.navigation.navigate('Register', {username: this.state.username})} title='Create Account'/>
      </View>
    )
  }
}

现在，如果我按下按钮，我想转到this.state.username新屏幕。如果我不使用onChange={(input) => this.setState({username: input})}并手动设置用户名的值，如下所示：

this.state = {
    username: 'Test',
}

该值毫无问题地通过，我可以从新屏幕访问它。但是当我尝试在更改this.state.username时TextInput …