1

我一直在尝试将我的减速器与我的上下文提供程序维护在同一个文件中。但是，我无法弄清楚如何在组件文件中使用它。

在我的 Context 函数内部：

const reducer = (state, action) => {
        switch (action.type) {
            case "SET_LOCATION":
                return {...state, location: action.payload}
            case "SET_BUSINESS":
                return {...state, business: action.payload}
            case "SET_DATE":
                return {...state, date: action.payload}
            default:
                return state
            }
    }

const [{location, business, date}, dispatch] = useReducer(reducer, {
        location: "",
        business: "",
        date: "today",
    })

return (
        <ThemeContext.Provider value={{location, business, date, dispatch, reducer}}>
            {props.children}
        </ThemeContext.Provider>
    )

在表单内部的组件处：我怀疑我没有正确使用调度，但无法通过谷歌搜索解决它

const {location, business, date, dispatch, reducer} = useContext(ThemeContext)

     return (
              <form className="booking-form">
                <h1>Book a service</h1>
                <label>
                    Location
                <input 
                    type="text" 
                    name="location"
                    value={location} 
                    onChange={() => dispatch("SET_LOCATION")}    
                />
                </label>
                <br/>
                <br/>
                <label> 
                    Business
                <input 
                    type="text" 
                    name="business"
                    value={business}
                    onChange={() => dispatch("SET_BUSINESS")}
                />
                </label>
                    <h2 className="date">Date</h2>
                <label>
                <input 
                    type="radio"
                    name="date" 
                    value="today"
                    checked={date === "today"}
                    onChange={() => dispatch("SET_DATE")}
                />
                    Today
                </label>
                <label>
                <input 
                    type="radio"
                    name="date" 
                    value="tomorrow"
                    checked={date === "tomorrow"}
                    onChange={() => dispatch("SET_DATE")}
                />
                    Tomorrow
                </label>
                <label>
                <input 
                    type="radio"
                    name="date" 
                    value="other"
                    checked={date === "other"}
                    onChange={() => dispatch("SET_DATE")}
                />
                    Different date
                </label>
                {date === "other" ? <Calendar/> : <TimeGrid/>}
            </form>
4

1 回答 1

0

你的 reducer 期望收到一个带有 field 的对象type：

const reducer = (state, action) => {
  switch (action.type) {
  // we're checking field type here
  ...
}

但是您传递的只是字符串：

() => dispatch("SET_DATE")

您需要调度具有预期结构的操作对象，因为您的减速器将接收dispatch()方法的参数作为第二个参数：

() => dispatch({ type: 'SET_DATE', payload: ... })

您还需要提供一些有效负载，因为您的减速器期望它：

const reducer = (state, action) => {
  return {...state, date: action.payload}
  // here we expect payload field on action object
}

另一项改进 - 请从组件中提取你的减速器，因为它有点静态纯函数。

于 2019-12-05T10:30:16.230 回答