Reactjs 反应上下文：使用者不从提供程序触发处理程序

我有以下情况： 为我的组件提供状态的提供程序：

ChildProvider

和许多使用者：

ChildrenComponent

，

ChildrenListComponent

等。在提供程序中，我设置了处理添加、编辑和删除列表项的处理程序，还设置了处理显示或隐藏组件的处理程序以及每个si的子列表。我可以完全按照预期查看提供者提供的列表，但处理程序不起作用。例如，在childrenlist组件中，我发送了处理程序，根据TitleComponent中的按钮单击显示AddChildComponent，但我看不到

ChildrenAddComponent

呈现，我不知道为什么。我错过了什么？它正在工作的任何其他处理程序：(

MilesContext

import React from 'react';

const MilesContext = React.createContext();

export default MilesContext;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenList from './ChildrenListComponent';
import ChildrenAddComponent from './ChildrenAddComponent';

const Children = () => (
    <MilesContext.Consumer>
        {(value) => (
            <>
                <ChildrenList />
                { value.child.showComp ?
                    <ChildrenAddComponent/>
                    :
                    null
                }
            </>
        )}
    </MilesContext.Consumer>
)

export default Children;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenItem from './ChildrenItem';
import TitleComponent from '../TitleComponent';

const ChildrenList = (props) => (
    <MilesContext.Consumer>
        {value => (
            <div className="container-wrapper">
                <div className="row">
                    <TitleComponent 
                        title={ "Children" } 
                        icon={ "fa fa-plus-circle fa-2x justify-content-center mx-auto top-right" }
                        showComponent={ value.child.handleShowComponent } 
                    />
                </div>
                <div className="row justify-content-center">
                    { value.child.childList.length === 0 ?
                        <div className="col-sm-3">
                            <div className="card bg-warning text-center pt-3">
                                <p>No child added!</p>
                            </div>
                        </div>
                        : 
                        <div className="col-sm-6">
                            <ul className="list-unstyled">
                                { value.child.childList.map(child => {
                                    console.log(value.child.handleDeleteChildren)
                                    return (
                                        <li key={ child.id }>
                                            <ChildrenItem
                                                child={ child }
                                                handleEditChildren={ value.child.handleEditChildren }
                                                handleDeleteChildren={ value.child.handleDeleteChildren }
                                            />
                                        </li>
                                    )})
                                }
                            </ul>
                        </div>
                    }
                </div>
            </div>
        )}
    </MilesContext.Consumer>
)

export default ChildrenList;

import React from 'react';
import MilesContext  from '../context/MilesContext';

export default function TitleComponent(props) {

    return (
        <MilesContext.Consumer>
            { value => (
                <div className="col-sm-12 title-container">
                    <h3><i className="fa fa-user fa-1x mr-3"></i>{props.title}</h3>
                    <i className={props.icon} onClick={() => props.showComponent}></i>
                    <hr/>
                </div>
            )}
        </MilesContext.Consumer>
    );
}

儿童提供者

import MilesContext from './MilesContext';
import React, {Component} from 'react';

export default class ChildProvider extends Component {

    state = {
        child: {
            childList : [{
                id: 1,
                name: "Sheldon Lee Cooper",
                birthDate: "01-25-2014",
                gender: "male"

            },
            {
                id: 2,
                name: "Amy Farah Fowler",
                birthDate: "06-25-2017",
                gender: "female"
            }],
            showComp : false,
            handleShow : this.handleShowComponent,
            handleHide : this.handleHideComponent,
            handAddChildren : this.handleAddChildrenToList,
            handleEditChildren : this.handleEditChildrenFromList,
            handleDeleteChildren: this.handleDeleteChildrenFromList
        }
    }

    handleShowComponent = () => {
        console.log("eliete")
        this.setState({ showComp : true})
    }
    handleHideComponent = () => this.setState({ showComp : false})
    handleAddChildrenToList = (child) => {
        child.id = this.state.child.childList.length + 1
        this.setState({
            childList: [...this.state.child.childList, child]
        })
    }
    handleEditChildrenFromList = (editedChild) => {
        const editedList = this.state.child.childList.map(child => (child.id === editedChild.id ? editedChild : child))
        this.setState({childList: editedList})
    }
    handleDeleteChildrenFromList = (deletedChild) => {
        const editedList = this.state.child.childList.filter(child => child.id !== deletedChild.id)
        this.setState({childList: editedList})
    }

    render() {
        return (
            <MilesContext.Provider
                value={{
                    child: this.state.child,
                    handleShowComponent : this.state.child.handleShow,
                    handleHideComponent : this.state.child.handleHide,
                    handleAddChildrenToList : this.state.child.handAddChildren,
                    handleEditChildrenFromList : this.state.child.handleEditChildren,
                    handleDeleteChildrenFromList: this.state.child.handleDeleteChildren
                }}>
                {this.props.children}
            </MilesContext.Provider>
        );
    }

}

从“/MilesContext”导入MilesContext；
从“React”导入React，{Component}；
导出默认类ChildProvider扩展组件{
状态={
儿童：{
儿童名单：[{
id:1，
姓名：“Sheldon Lee Cooper”，
出生日期：“2014年1月25日”，
性别：“男性”
},
{
id:2，
姓名：“艾米·法拉·福勒”，
出生日期：“2017年6月25日”，
性别：“女性”
}],
showComp：错，
handleShow:this.handleShow组件，
handleHide:this.handleHideComponent，
handAddChildren:this.handleAddChildrenToList，
handleEditChildrenFromList:this.handleEditChildrenFromList，
HandleDeleteTechIldren:this.HandleDeleteTechIldrenFromList
}
}
handleShowComponent=（）=>{
控制台日志（“Elite”）
this.setState（{showComp:true}）
}
handleHideComponent=（）=>this.setState（{showComp:false}）
手持儿童列表=（儿童）=>{
child.id=this.state.child.childList.length+1
这是我的国家({
childList:[…this.state.child.childList，child]
})
}
handleEditChildrenFromList=（editedChild）=>{
const editedList=this.state.child.childList.map（child=>（child.id===editedChild.id？editedChild:child））
this.setState（{childList:editedList}）
}
handleDeleteChildrenFromList=（deletedChild）=>{
const editedList=this.state.child.childList.filter（child=>child.id！==deletedChild.id）
this.setState（{childList:editedList}）
}
render（）{
返回(
{this.props.children}
);
}
}

ChildrenComponent

import React from 'react';

const MilesContext = React.createContext();

export default MilesContext;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenList from './ChildrenListComponent';
import ChildrenAddComponent from './ChildrenAddComponent';

const Children = () => (
    <MilesContext.Consumer>
        {(value) => (
            <>
                <ChildrenList />
                { value.child.showComp ?
                    <ChildrenAddComponent/>
                    :
                    null
                }
            </>
        )}
    </MilesContext.Consumer>
)

export default Children;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenItem from './ChildrenItem';
import TitleComponent from '../TitleComponent';

const ChildrenList = (props) => (
    <MilesContext.Consumer>
        {value => (
            <div className="container-wrapper">
                <div className="row">
                    <TitleComponent 
                        title={ "Children" } 
                        icon={ "fa fa-plus-circle fa-2x justify-content-center mx-auto top-right" }
                        showComponent={ value.child.handleShowComponent } 
                    />
                </div>
                <div className="row justify-content-center">
                    { value.child.childList.length === 0 ?
                        <div className="col-sm-3">
                            <div className="card bg-warning text-center pt-3">
                                <p>No child added!</p>
                            </div>
                        </div>
                        : 
                        <div className="col-sm-6">
                            <ul className="list-unstyled">
                                { value.child.childList.map(child => {
                                    console.log(value.child.handleDeleteChildren)
                                    return (
                                        <li key={ child.id }>
                                            <ChildrenItem
                                                child={ child }
                                                handleEditChildren={ value.child.handleEditChildren }
                                                handleDeleteChildren={ value.child.handleDeleteChildren }
                                            />
                                        </li>
                                    )})
                                }
                            </ul>
                        </div>
                    }
                </div>
            </div>
        )}
    </MilesContext.Consumer>
)

export default ChildrenList;

import React from 'react';
import MilesContext  from '../context/MilesContext';

export default function TitleComponent(props) {

    return (
        <MilesContext.Consumer>
            { value => (
                <div className="col-sm-12 title-container">
                    <h3><i className="fa fa-user fa-1x mr-3"></i>{props.title}</h3>
                    <i className={props.icon} onClick={() => props.showComponent}></i>
                    <hr/>
                </div>
            )}
        </MilesContext.Consumer>
    );
}

从“React”导入React；
从“../../context/MilesContext”导入MilesContext；
从“/ChildrenListComponent”导入ChildrenList；
从“/ChildrenAddComponent”导入ChildrenAddComponent；
const Children=（）=>(
{（值）=>(
{value.child.showComp？
:
无效的
}
)}
)
导出默认子对象；

ChildrenComponent

import React from 'react';

const MilesContext = React.createContext();

export default MilesContext;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenList from './ChildrenListComponent';
import ChildrenAddComponent from './ChildrenAddComponent';

const Children = () => (
    <MilesContext.Consumer>
        {(value) => (
            <>
                <ChildrenList />
                { value.child.showComp ?
                    <ChildrenAddComponent/>
                    :
                    null
                }
            </>
        )}
    </MilesContext.Consumer>
)

export default Children;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenItem from './ChildrenItem';
import TitleComponent from '../TitleComponent';

const ChildrenList = (props) => (
    <MilesContext.Consumer>
        {value => (
            <div className="container-wrapper">
                <div className="row">
                    <TitleComponent 
                        title={ "Children" } 
                        icon={ "fa fa-plus-circle fa-2x justify-content-center mx-auto top-right" }
                        showComponent={ value.child.handleShowComponent } 
                    />
                </div>
                <div className="row justify-content-center">
                    { value.child.childList.length === 0 ?
                        <div className="col-sm-3">
                            <div className="card bg-warning text-center pt-3">
                                <p>No child added!</p>
                            </div>
                        </div>
                        : 
                        <div className="col-sm-6">
                            <ul className="list-unstyled">
                                { value.child.childList.map(child => {
                                    console.log(value.child.handleDeleteChildren)
                                    return (
                                        <li key={ child.id }>
                                            <ChildrenItem
                                                child={ child }
                                                handleEditChildren={ value.child.handleEditChildren }
                                                handleDeleteChildren={ value.child.handleDeleteChildren }
                                            />
                                        </li>
                                    )})
                                }
                            </ul>
                        </div>
                    }
                </div>
            </div>
        )}
    </MilesContext.Consumer>
)

export default ChildrenList;

import React from 'react';
import MilesContext  from '../context/MilesContext';

export default function TitleComponent(props) {

    return (
        <MilesContext.Consumer>
            { value => (
                <div className="col-sm-12 title-container">
                    <h3><i className="fa fa-user fa-1x mr-3"></i>{props.title}</h3>
                    <i className={props.icon} onClick={() => props.showComponent}></i>
                    <hr/>
                </div>
            )}
        </MilesContext.Consumer>
    );
}

从“React”导入React；
从“../../context/MilesContext”导入MilesContext；
从“/ChildrenItem”导入ChildrenItem；
从“../TitleComponent”导入标题组件；
const ChildrenList=（道具）=>(
{value=>(
{value.child.childList.length==0？
没有孩子加入

: 

{value.child.childList.map（child=>{
console.log（value.child.handleDeleteChildren）
返回(


)})
}

}
)}
)
导出默认儿童列表；

标题组合

import React from 'react';

const MilesContext = React.createContext();

export default MilesContext;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenList from './ChildrenListComponent';
import ChildrenAddComponent from './ChildrenAddComponent';

const Children = () => (
    <MilesContext.Consumer>
        {(value) => (
            <>
                <ChildrenList />
                { value.child.showComp ?
                    <ChildrenAddComponent/>
                    :
                    null
                }
            </>
        )}
    </MilesContext.Consumer>
)

export default Children;

import React from 'react';
import MilesContext  from '../../context/MilesContext';
import ChildrenItem from './ChildrenItem';
import TitleComponent from '../TitleComponent';

const ChildrenList = (props) => (
    <MilesContext.Consumer>
        {value => (
            <div className="container-wrapper">
                <div className="row">
                    <TitleComponent 
                        title={ "Children" } 
                        icon={ "fa fa-plus-circle fa-2x justify-content-center mx-auto top-right" }
                        showComponent={ value.child.handleShowComponent } 
                    />
                </div>
                <div className="row justify-content-center">
                    { value.child.childList.length === 0 ?
                        <div className="col-sm-3">
                            <div className="card bg-warning text-center pt-3">
                                <p>No child added!</p>
                            </div>
                        </div>
                        : 
                        <div className="col-sm-6">
                            <ul className="list-unstyled">
                                { value.child.childList.map(child => {
                                    console.log(value.child.handleDeleteChildren)
                                    return (
                                        <li key={ child.id }>
                                            <ChildrenItem
                                                child={ child }
                                                handleEditChildren={ value.child.handleEditChildren }
                                                handleDeleteChildren={ value.child.handleDeleteChildren }
                                            />
                                        </li>
                                    )})
                                }
                            </ul>
                        </div>
                    }
                </div>
            </div>
        )}
    </MilesContext.Consumer>
)

export default ChildrenList;

import React from 'react';
import MilesContext  from '../context/MilesContext';

export default function TitleComponent(props) {

    return (
        <MilesContext.Consumer>
            { value => (
                <div className="col-sm-12 title-container">
                    <h3><i className="fa fa-user fa-1x mr-3"></i>{props.title}</h3>
                    <i className={props.icon} onClick={() => props.showComponent}></i>
                    <hr/>
                </div>
            )}
        </MilesContext.Consumer>
    );
}

从“React”导入React；
从“../context/MilesContext”导入MilesContext；
导出默认函数标题组件（道具）{
返回(
{value=>(
{props.title}
props.showComponent}>

)}
);
}
问题来自
“不同的状态级别”

这在
this.state.showComp
上运行，而不是在
this.state.child.showComp
上运行，这是您[可能]期望的

还是在这里

更多信息

谷歌搜索其他
setState
deep对象更新示例…或与redux相关的…同样的规则适用（浅层比较）