React：XX 不是一个函数 - 但它是并且它与其他组件一起工作

Question

我遇到的问题是我无法将值作为 prop 传递给函数，因为它不被识别为函数 - 但它显然是。让我向您展示我的代码。

最高组件 - Treelist

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 组件 - Treenode

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>
    );
}

如您所见，我始终使用函数并将它们作为 props 从最高组件 (Treelist) 传递到最低组件 (treenode)。如果选择了一个Treenode，我想将各自节点的ID传回给最高的组件。

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

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

非常感谢。

Answer 1

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

<Tree treeData={node.children} />

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

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

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

类似于：

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

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

React：XX 不是一个函数 - 但它是并且它与其他组件一起工作

React: XX is not a function - but it is and it works with other components

typeerror

reactjs

react-functional-component