将道具传递给父母[重复]

Question

我正在尝试使用在 child.js 中的函数中生成的值并将其传递给 parent.js，以便我可以使用此值来过滤子数组。

Child.js

const returnDistance = () => {
            const dist = getDistance(userLat, userLng, lat, lng).toFixed(1);
            this.props.onCalculateDistance(dist);
            return dist;
        }

return dist 是生成的值，我需要在 parent.js 中访问

Parent.js

// The callback function
    distanceChange = (dist) => {
            console.log(dist)
            return dist;
    }

//The map to render child.js data. Im passing distanceChange as a prop.
{filteredResults.filter(({ node }) => (node.onCalculateDistance >= 0)).map(({ node }) => {
    return (
        <SpaceWrapper key={node.id}>
            <Space node={node} onCalculateDistance={this.distanceChange} />
        </SpaceWrapper>
    )
}
)}

我在这里遗漏了什么明显的东西吗？ distanceChange 的 console.log 返回 child.js 节点的所有值，但在用作道具时返回 undefined。

如何让函数运行，以便使用返回值过滤结果？

谢谢

Answer 1

我认为你所做的只是返回一个值，而不是用它做任何事情。要让父级存储dist 的值，它需要具有该属性。

您需要做的是将属性dist 添加到父级，然后在父级中定义getDistance。然后您可以将getDistance 传递给孩子，孩子可以调用该函数来更新父this.state.dist 属性。

所以例如你可以有

parent.js

return (
    <SpaceWrapper key={node.id}>
        <Space node={node} getDistance={this.getDistance} />
    </SpaceWrapper>
)

然后在child可以调用this.props.getDistance()更新

希望对你有所帮助。