React: XX 不是一个函数 - 但它是并且它可以与其他组件一起使用答案

【问题标题】：React: XX is not a function - but it is and it works with other componentsReact: XX 不是一个函数 - 但它是并且它可以与其他组件一起使用
【发布时间】：2021-11-13 13:05:36
【问题描述】：

我的问题是我不能将值作为道具传递给函数，因为它不被识别为函数 - 但它显然是。让我给你看看我的代码。

最高组件 - 树列表

export const TreeList = ( {  treeData, updateSelectedNodeId }) => {

    function updateOfSelectedNode(nodeId) {
        updateSelectedNodeId(nodeId);
    }
  
    return (
        <>
        <div className="row">
          <div className="col text-center">
            <h2>Tree Visualization component</h2>
              <div className="row mt-3 d-flex justify-content-center">
                <div className="col-lg-8 text-left text-dark">
                    {/* <Tree treeData= { treeData } logg = { logger } /> */}
                    <Tree
                    treeData = { treeData }
                    currentNodeIdUpdate = { updateOfSelectedNode }
                    >
                    </Tree>


                </div>
              </div>
          </div>
        </div>
        </>
    )
}

下一个组件 - 树

export const Tree = ( { treeData, currentNodeIdUpdate }) => {

    // const [currentNodeId, setCurrentNodeId] = useState();

    function updateSelectedNodeHandler(nodeId) {
        console.log(`tree : request to approve update of nodeId is : ${nodeId}`);
        console.log(currentNodeIdUpdate);
        currentNodeIdUpdate(nodeId)
    };


    return (
        <div>
            <div className="d-tree">
                <ul className="d-flex d-tree-container flex-column tree-connect">
                    { treeData.map(tree => (
                        <TreeNode node={ tree } updateSelectedNodeId = { updateSelectedNodeHandler  }></TreeNode>
                    ))}
                </ul>

            </div>
            
        </div>
    )
}

Smalles 组件 - 树节点

export const TreeNode = ( { node, updateSelectedNodeId }) => {
    const [childVisible, setChildVisiblity] = useState(false);


    const hasChild = node.children.length > 0 ? true : false;

    const changeVisibility = () => {
        setChildVisiblity( (v) => !v);
    }

    function updateSelectedNode(nodeId) {
        console.log(`update of node id happened: currently at ${nodeId}`);
        updateSelectedNodeId(nodeId);
    }



    return (
        <div className="testA">
        <li className="d-tree-node border-0">
            <div className="d-flex" onClick={changeVisibility}>
                {hasChild && (
                    <div className={`d-inline d-tree-toggler ${childVisible ? "active" : ""}`}>
                    </div>
                )}
                <div className="col d-tree-head">
                    {node.limitGroupName &&
                    <div className="node-tree-card"  onClick={() => updateSelectedNode(node.limitGroupId)}>
                        <p>{node.limitGroupName}</p>
                    </div>
                    }
                    
                </div>
            </div>

            {/* {hasChild && childVisible && ( */}
            {true && true && (
                <div className="d-flex d-tree-content">
                    <ul className="d-flex d-tree-container flex-column tree-connect">
                        <Tree treeData={node.children} />
                    </ul>
                </div>
                )
            }
        </li>
        </div>
    );
}

如您所见，我使用 always 函数并将它们作为道具从最高组件（Treelist）传递到最低组件（treenode）。如果选择了 Treenode，我想将相应节点的 ID 传递回最高组件。

但是，如果我尝试对此进行测试，我会收到错误，即 Tree 中的 currentNodeIdUpdate 不是函数。但是，正如您在 TreeList 中看到的那样，它显然是。

我错过了什么？在这个问题上坐了几个小时......

非常感谢。

【问题讨论】：

标签： reactjs typeerror react-functional-component

【解决方案1】：

在TreeNode 组件中，您正在渲染Tree

<Tree treeData={node.children} />

但是Tree 组件需要名为currentNodeIdUpdate 的第二个prop，它应该是函数。

在这种情况下，它是未定义的；

如果您在 Tree 组件中添加检查，它应该可以解决问题。

类似：

function updateSelectedNodeHandler(nodeId) {
    console.log(`tree : request to approve update of nodeId is : ${nodeId}`);
    console.log(currentNodeIdUpdate);

    if(currentNodeIdUpdate) {
      currentNodeIdUpdate(nodeId)
    }
};

【讨论】：