Question

在下面编辑

我正在尝试将我的状态迁移到某些上下文，这样我就不必不断地进行练习。问题是，状态不会在上下文中更新。我只想将 state 中的单个值在点击时更改为 true。

这是我的 projectTile.js

import React, {useContext} from 'react';
import {ProjectContext, ProjectProvider} from './ProjectContext.js';
import {ProjectFunctionsContext, ProjectFunctionsProvider} from './projectFunctionsContext';


// profpic is going to be pulled from the logged in user, for demonstration purposes I just have it pulling the default profile picture right now
import profpic from '../../icon.png';

// projectImage will be passed from the project component, for now it's just a default chosen from the directory.
import defaultProjectImage from '../../defaultProject.jpg';


const ProjectTile = ({projectAuthorName, projectTitle, projectImage,setSavedProjectData}) => {
    
    const [projects, setProjects] = useContext(ProjectContext);
    const [projectClicked, setProjectClicked] = useContext(ProjectFunctionsContext);
    
    

    // Console Log to try to figure out where any errors are coming from, if they arise.
    console.log('Project Author: ' + projectAuthorName + " \n Project Title: " + projectTitle + " \n Project Image: " + projectImage);

    // In this return statement, we build the project tile out of the elements that we're getting from the ProjectContext
    console.log('projectClicked is doing this: ' + projectClicked);
    return (
        <div className="ProjectTile__container" onClick={() => {setProjectClicked(true); console.log(projectClicked);setSavedProjectData({projectAuthorName: projectAuthorName})}}>
            <img src={defaultProjectImage /*projectImage -- this is commented out because it doesn't work at the moment*/} className="ProjectTile__Img" alt="Placeholder"/>
            <div className="ProjectTile__overlay" >
                <img src={profpic} className="ProjectTile__icon" alt="Profile"/>
                <div className="ProjectTile__text">
                    {projectTitle}  
                     <br></br>
                    {projectAuthorName}
                </div>
            </div>
        </div>
);
}

export default ProjectTile;

这是我的 projectFunctionsContext.js

import React, {useState, createContext} from 'react';

export const ProjectFunctionsContext = createContext();

export const ProjectFunctionsProvider = (props) => {
    const [projectClicked, setProjectClicked] = useState(false);
    
    return(
        <ProjectFunctionsContext.Provider 
            value={[projectClicked,setProjectClicked]}
        >
            {props.children}
        </ProjectFunctionsContext.Provider>
    );
}

它只是不会将 projectClicked 更新为 true，我做错了什么？

编辑： 在此组件的父级中调用上下文，使其重置状态。它恰好可以通过一次调用来获取这些变量。

Answer 1

您需要在 ContextProvider 中设置 values 对象，以便您可以使用 useContext 钩子访问组件中的属性。

您的提供商应如下所示：

const contextValue = {
    projectClicked,
    setProjectClicked
};

<ProjectFunctionsContext.Provider value={contextValue}>
   {props.children}
</ProjectFunctionsContext.Provider>

然后在你的组件中使用 useContext 钩子来检索存储在上下文中的值：

const { projectClicked, setProjectClicked } = useContext(ProjectFunctionsContext);

无法在上下文中更新状态

1 个答案: