Reactjs 在React中单击另一个组件时，如何还原为以前单击的组件的原始背景色

我试图实现的是，正如标题中提到的，当侧边栏中的另一个条目组件被单击时，恢复组件的背景色。我使用React上下文API进行状态管理。初始状态包含一个名为

numbers

的对象数组，该数组有两个元素（

id

&

numbers

）和

current

。在Sidebar.js上，它通过迭代

numbers

数组呈现SidebarEntry组件。 我知道为什么我会被困在这一点上。这是因为我无法更改以前单击的组件的状态，除非再次单击它。下面的代码片段是我复制的问题

reducer.js

export const initialState = {
    numbers: [
        {
            id: 1,
            number: 101
        },
        {
            id: 2,
            number: 102
        },
        {
            id: 3,
            number: 103
        },       
    ],
    current: null
}

const reducer = (state, action) => {

    switch(action.type) {
        case 'CHANGE_STATE':
            return {
                ...state,
                current: action.current
            };
        default:
            return state;
    }
}

export default reducer;

StateProvider.js（它用

initialState

和

reducer

参数包装在index.js中）

import React，{createContext，useContext，useReducer}来自“React”；
export const StateContext=createContext（）；
export const StateProvider=（{reducer，initialState，children}）=>(
{儿童}
);
export const useStateValue=（）=>useContext（StateContext）；

Sidebar.js

const Sidebar = () => {

    const [{ numbers }] = useStateValue();

    return (
        <div className="sidebar">
            {
                numbers.map(number => (
                    <SidebarEntry key={number.id} number = {number.number} />
                ))
            }
        </div>
    )
}

export default Sidebar

const侧边栏=（）=>{
常量[{numbers}]=useStateValue（）；
返回(
{
number.map（number=>(
))
}
)
}
导出默认边栏

SidebarEntry.js

const SidebarEntry = ({ number }) => {

    const [{ current }, dispatch] = useStateValue();
    const [selected, setSelected] = useState(false);

    const changeState = (e) => {
        e.preventDefault();

        dispatch({
            type: "CHANGE_STATE",
            current: {number}
        });
        setSelected(!selected);
    }

    return (
        <div className="sidebarEntry">
            <h3 
                className={selected && "sidebarEntry__color"}
                onClick={changeState}
            >
                {number}
            </h3>
        </div>
    )
}

export default SidebarEntry

const SidebarEntry=（{number}）=>{
const[{current}，dispatch]=useStateValue（）；
const[selected，setSelected]=使用状态（false）；
const changeState=（e）=>{
e、 预防默认值（）；
派遣({
类型：“更改状态”，
当前：{number}
});
setSelected（！selected）；
}
返回(
{number}
)
}
导出默认SidebarEntry

侧边栏和侧边栏入口

单击101，然后单击102（101的背景色应恢复为灰色）

---

问题在于，当您

在
redux
中调度一个新的活动值时，实际上是在更改
redux状态。
但是您没有更改所选组件的
当前状态

我会删除这个
状态
，然后像这样做：

const SidebarEntry = ({ number }) => {

    const [{ current }, dispatch] = useStateValue();

    const changeState = (e) => {
        e.preventDefault();

        dispatch({
            type: "CHANGE_STATE",
            current: {number}
        });
        setSelected(!selected);
    }

    return (
        <div className="sidebarEntry">
            <h3 
                className={current === number && "sidebarEntry__color"}
                onClick={changeState}
            >
                {number}
            </h3>
        </div>
    )
}

export default SidebarEntry

const SidebarEntry=（{number}）=>{
const[{current}，dispatch]=useStateValue（）；
const changeState=（e）=>{
e、 预防默认值（）；
派遣({
类型：“更改状态”，
当前：{number}
});
setSelected（！selected）；
}
返回(
{number}
)
}
导出默认SidebarEntry

这应该对你有用

const SidebarEntry = ({ number }) => {

    const [{ current }, dispatch] = useStateValue();

    const changeState = (e) => {
        e.preventDefault();

        dispatch({
            type: "CHANGE_STATE",
            current: {number}
        });
        setSelected(!selected);
    }

    return (
        <div className="sidebarEntry">
            <h3 
                className={current === number && "sidebarEntry__color"}
                onClick={changeState}
            >
                {number}
            </h3>
        </div>
    )
}

export default SidebarEntry