如果使用 props drilling 但 useContext 不可用，则 useState 的函数可用

Question

早上好，

我正在将一个应用程序从 props drilling 转换为 useContext 并遇到一个奇怪的问题。我分配给道具的功能被视为钻孔道具的功能，但从创建的上下文中拉出时则不会。在相同的上下文中，我还有其他功能可以正常工作。您将在下面找到我的组件中与问题相关的部分：

根组件：

import UserContext from '../context/userContext';
/*...imports
*/

const wageTrak = (props) => {
const [userState, setUserState] = useState({});
const [jobState, setJobState] = useState({});

                                //this is usable as a function
const contextArr = [ userState, setUserState, 
                               //this is not
                     jobState, setJobState ];

/* ...more code
 *
 */

let userData = "Loading...";

if (userState) {
    userData = <User
        //I am trying to eliminate this but I can't seem to
        setJob={setJobState}
    />
}

return (
    <React.Fragment>
        <UserContext.Provider value={[...contextArr]}>
             ....
            <Route
                    path="/wagetrak/"
                    render={() => userData}
                />
             . . . 
        </UserContext.Provider>

用户组件：

import UserContext from '../../context/userContext';
//imports

const user = (props) => {
const [ showModal, setShowModal ] = useState({});
const [ userState ] = useContext(UserContext);

/*
 * functions
 */

return (
    <React.Fragment>
        <main className="user">
            <header className="margin flexDiv" onClick={() => clickedNameHandler()}>
                <div className="userName capitalize">{userState.name}</div>
                {window.location.pathname === "/wagetrak" && 
                    <div className="editDiv" onClick={() => toggleModal()}><i className="fa fa- 
                                                pencil-square-o" aria-hidden="true"></i></div>}
            </header>
            <section>
                <p className="margin">Your tax rate: {userState.taxRate * 100}%</p>
            </section>
            <section className="buttonDiv">
                <div onClick={() => addJobHandler()}>
                    Add Job
                </div>
            </section>
            <section>
                <Jobs setJob={props.setJob} />
            </section>
        </main>
</React.Fragment>
);
}

工作组件：

import UserContext from '../../context/userContext';
//imports
                                 //When I attempt to use this as a function I get a compilation error
const [ userState, setUserState, setJobState ] = useContext(UserContext);

/*The change I'm trying to make
 *const selectJob = setJobState;
 */

const jobClickedHandler = (j) => {
    //I'm trying to use it here
    props.setJob(j);
    //selectJob(j);  <---this instead of props.setJob(j);
    props.history.push("wagetrak/job");
}

//...

const deleteJob = (name) => {
    fetch(
        "http://localhost:8080/wageTrak/" + userState.id + "/" + name,
        {
            method: 'DELETE',
            headers: {
                'Content-type': 'application/json',
                'Access-Control-Allow-Origin': 'localhost:3000/',
                'Access-Control-Allow-Methods': 'DELETE'
            },
        }
                                          //this works as intended
    ).then(res => res.json()).then(res => setUserState(res));
}

//...

return (
    <div className="jobs">
        <ul className="jobs-list">
            {userState.jobs && userState.jobs.map(j => (
                <li className="capitalize" key={j.name}>
                    <div className="job-thumbnail">
                        <div className="job-name" onClick={() => 
                            jobClickedHandler(j)
                        }>{j.name}</div>
                        <div onClick={() => deleteClickedHandler(j.name)}>
                            <i className="fa fa-times delete-button" aria-hidden="true"></i>
                        </div>
                    </div>
                </li>
            )
            )}
        </ul>
    </div>
);
}

上下文文件：

import React from 'react';

const userContext = React.createContext({});

export default userContext;

将代码更改为上面注释掉的代码会导致以下错误：

TypeError: selectJob is not a function at jobClickedHandler (Jobs.js:14) at onClick (Jobs.js:44)...

我在做什么导致 setJobState 未被识别为函数，而 setUserState 是？

如果我需要包含更多代码，请告诉我。

提前致谢。

Answer 1

从

更改数组解构

const [ userState, setUserState, setJobState ] = useContext(UserContext);

至

const [ userState, setUserState, jobState, setJobState ] = useContext(UserContext);

甚至你也可以直接给出你的变量名，例如

const [ userState, setUserState, jobState, selectJob ] = useContext(UserContext);

因为数组解构作用于索引而不是属性名称。

如果使用 props drilling 但 useContext 不可用，则 useState 的函数可用

Function from useState is usable if using props drilling but not from useContext

reactjs

use-context