当我尝试在反应中使用 useReducer 钩子时遇到问题答案

【问题标题】：i have a problem when i try to use useReducer hooks in react当我尝试在反应中使用 useReducer 钩子时遇到问题
【发布时间】：2020-11-05 00:44:08
【问题描述】：

这是我的代码

import React, {createContext, useContext, useReducer } from 'react';

// this is data layer
export const StateContext = createContext();

//  build a provider
export const StateProvider = ({ reducer, initialState, children}) => {
    
    <StateContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider>
};

但是当我运行应用程序时出现此错误

编译失败。

./src/StateProvider.js 第 9:5 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

搜索关键字以了解有关每个错误的更多信息。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

似乎您没有从StateProvider 功能组件返回。将您的 StateProvider 声明替换为

    export const StateProvider = ({ reducer, initialState, children}) => (
        <StateContext.Provider value={useReducer(reducer, initialState)}>
            {children}
        </StateContext.Provider>
    )

（通知{ }替换为( )）

或者


    export const StateProvider = ({ reducer, initialState, children}) => {
        return (
            <StateContext.Provider value={useReducer(reducer, initialState)}>
                {children}
            </StateContext.Provider>
        )
    }

【讨论】：

【解决方案2】：

<StateProvider /> 不是有效的 React 组件，因为它没有返回任何 React 元素。这都是关于 JSX 和箭头函数的东西。错误消息也会给你这个提示。

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression
// equivalent to: => { return expression; }

// Parenthesize the body of a function to return an object literal expression:
params => ({foo: bar})

在您的情况下，StateProvider 没有返回任何内容。

制作：

export const StateProvider = ({ reducer, initialState, children}) => (
        <StateContext.Provider value={useReducer(reducer, initialState)}>
            {children}
        </StateContext.Provider>
)

【讨论】：