Question

我遇到一个奇怪的问题，只要呈现该功能的子组件的onPress函数就会被触发。

从日期列表中呈现子组件的相关父代码。如果组件是类组件，我也遇到了array.map的问题，但这是一个单独的问题。

return list_items.map(data => 
  <ChildComponent 
    key={data.day}
    props={data}
  />);

子组件：

const ChildComponent = ({ props }) => {
  let date = props.date;
  const someFunction = () => {
    console.log(date)
  }
return (
  <Text><Icon name="angle-right" onPress={someFunction()}/></Text>
)

渲染相关场景后我从控制台获得的信息：

2018-11-11

2018-11-12

2018-11-13

2018-11-14

2018-11-15

2018-11-16

按该图标不会执行任何操作，但似乎可以运行该功能，就好像它是生命周期组件一样。按照Guruparan Giritharan的建议，我还将函数移到了父组件中，并将其传递给了子组件，它仍然在render上执行。

return list_items.map(data => 
  <ChildComponent 
    key={data.day}
    props={data}
    someFunction={this.someFunction} // function now within parent component
  />);

以及更新后的孩子：

const ChildComponent = ({ props, someFunction }) => {
  return (
    <Text>
      <Icon name="angle-right" onPress={someFunction(props.date)}/> 
    </Text>
  )
}

Answer 1

更改为

<Text><Icon name="angle-right" onPress={someFunction}/></Text>

您要在其中本身调用函数，而不要传递引用。因此，该函数在每个渲染器内部调用，而不是onPress。

功能组件内部的方法

1 个答案: