小编Fai*_*ire的帖子

我在一个小型网站上使用 ReactJS。我决定使用 i18next 进行国际化并且它有效 - 除非我使用嵌套引用作为翻译键。

在下面的示例中，显示了 intro1 和 intro2 键，但没有找到welcome.headtitle（控制台中的错误“missingKey”）。

应用程序.js：

...
 <p><Trans i18nKey='intro1'/></p>
 <p><Trans i18nKey='intro2'/></p>
 <p><Trans i18nKey='welcome.headtitle'/></p>
...

翻译.json：

{
"welcome": {
    "headtitle": ...
    ...
  },
  "intro1": ...,
  "intro2": ...,
}

我知道 i18next 允许嵌套的 JSON 翻译对象。我究竟做错了什么？我检查了文档和示例，没有发现任何错误。

在我的 Zustand 存储中，我尝试从本地存储中保存的数据加载初始状态（我没有选择中间件，因为 Next 存在一些我不想处理的问题）：

const getInitialProject = (): Project => {
    const project = loadCurrentProjectFromLs()

    return (
        project ?? {
            projectName: '',
            cards: [],
        }
    )
}

const useProjectStore = create<ProjectStore>((set, get) => ({
    ...getInitialProject(),
...

然而，页面的第一次渲染是在服务器上完成的，而不是在客户端上完成的（在 React 和 Next.js 构造函数中，我收到“引用错误：本地存储未定义”），这意味着当时无法访问本地存储。

这意味着我的代码无法正常工作，因为状态只能在第一次渲染后更新，但导致 Zustand 初始化的钩子在第一次渲染期间被触发。

有没有比使用useEffect当 localStorage 变得可访问时更新存储的钩子更好的方法来解决这个问题？我希望逻辑成为商店的一部分，而不是客户端，但我想不出比带有计时器的循环更好的东西......

我正在嘲笑一个函数：

jest.mock('utils/downloadData')

在 utils/download data 中，我创建了一个模拟文件：

export default {
    general: jest.fn(() => {
        console.log('mock fired')
    }),
    csv: jest.fn(() => {
        console.log('mock fired')
    }),
}

该函数在我正在测试的函数内被调用：

...
const convertToCsv = () => {
        downloadData.csv(CSV.stringify(csvData), fileName)
        onFinish()
    }
...

调试时，我看到模拟函数在闭包中正确设置，当逐步调试时，我看到代码到达模拟函数内部，并且控制台记录消息。然而这个测试失败了：

expect(downloadData.csv).toBeCalledTimes(1)

JestdownloadData.csv在期望中接受，所以我相信它看到了模拟函数。

它怎么可能不将其注册为被调用呢？

我创建了一个上下文（CharacterContext），它导出类CharacterProvider，它本身将状态中的几个对象传递给消费者。我还想传递一个 REST 调用函数 getCharacter。我正在考虑像这样传递它：

export class CharacterProvider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
            ...
            getCharacter: this.getCharacter(),
        }
    }

    getCharacter = (id) => {
        console.log("Getting the character...")
        CharacterDataService.getCharacterById(id)
            .then(
                response => {
                    console.log(response);
                    this.setState({
                        name: response.data.username,
                        ...
                    });
                }
            )
    }

render() {
        return (
            <CharacterContext.Provider
                value={this.state}>
               {
                   this.props.children
               }
            </CharacterContext.Provider>
        )
    }

export const CharacterConsumer = CharacterContext.Consumer

不过我想这只会触发函数并传递结果。传递函数的正确方法是什么？到目前为止，元素已经收到了 props 中的函数，如下所示：

export default class Loader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            names: [/* …

一个实现样式化组件和滚动视图的 react-native 应用程序正在运行，但给了我这个警告：

index.js:1 Warning: React does not recognize the `enterKeyHint` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `enterkeyhint` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in input (created by TextInput)
    in TextInput (created by Context.Consumer)
    in StyledNativeComponent (created by Styled(TextInput))
    in Styled(TextInput) (at Signup.js:96)
    in div (created by View)
    in View (created by ScrollView) …

我设置了一个上下文来分发 Firebase 身份验证对象，如下所示：

export function AuthProvider(props: {children: React.ReactNode}) {
    const [user, setUser] = useState<IUser>({uid: ""});

    useEffect(() => {
        const unsubsribe = firebaseApp.auth().onAuthStateChanged(user => {
            if (user) {
                setUser(user);
                console.log("user: " + user.uid);
            }
        });
        return () => {
            unsubsribe();
        }
    }, [user]);

    const authContextValue = {
        firebaseApp,
        user,
        signOut: () => firebaseApp.auth().signOut(),
        signIn: (email: string, password: string) => firebaseApp.auth().signInWithEmailAndPassword(email, password),
    };

    return (
        <AuthContext.Provider value={authContextValue}>
            {props.children}
        </AuthContext.Provider>
    )
}

export const useAuth = () => React.useContext(AuthContext);

我尝试像这样使用传递的对象：

const {user} = …