当我尝试在react中使用useReducer钩子时，我遇到了一个问题

Question

这是我的代码

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行：应为赋值或函数调用，却看到一个没有未使用表达式的表达式

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

Answer 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>
)
}

Answer 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}) 

• MDN

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

成功：

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