Question

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

Child.js

NOT REGEXP

const returnDistance = () => { const dist = getDistance(userLat, userLng, lat, lng).toFixed(1); this.props.onCalculateDistance(dist); return dist; }是我需要在parent.js中访问的生成的值

Parent.js

return dist

我在这里错过明显的东西吗？ // 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> ) } )}的console.log返回child.js节点的所有值，但在用作prop时返回undefined。

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

谢谢

Answer 1

我认为您正在做的只是返回一个值，而不对此做任何事情。为了使父级存储dist的值，它需要具有该属性。

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

例如，您可以拥有

parent.js

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

然后在孩子中，您可以致电this.props.getDistance()进行更新

希望对您有帮助。

传递道具给父母

1 个答案: