什么是myFunction不是函数？

Question

I'm passing storyLike function from parent to child.Sometimes when onPress is clicked I get following error: this.props.storyLike(props.story) is not a function. I thought it's a context issue but couldn't resolve it.

Here is my Parent:

renderRow(item) {
        return (
          <Story
            story={item}
            openStory={this.props.openStory}
            getProfile={this.props.getProfile}
            storyLike={this.props.storyLike}
          />
        );
      }

Here is child component Story, just passing props to StoryFooter component:

class Story extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StoryHeader {...this.props} />
        <StoryContent {...this.props} />
        <StoryFooter {...this.props} storyViewType={"feed"} />
      </View>
    );
  }
}

Bellow is child component, I'm triggering storyLike from onPress changeLikedStatus function:

class StoryFooter extends Component {
  state = { isLiked: false, likes: 0 };

  changeLikedState(props) {
    const numberOflikes = this.state.isLiked
      ? this.state.likes - 1
      : this.state.likes + 1;

    if (this.state.isLiked) {
      this.setState({ isLiked: false, likes: numberOflikes });
    } else {
      this.setState({ isLiked: true, likes: numberOflikes });
    }
      this.props.storyLike(props.story);
  }

            <TouchableOpacity onPress={() => this.changeLikedState(this.props)}>

Answer 1

This is how your parent should look like

  renderRow(item) {
            return (
              <Story
                // ... other props
                storyLike={(prop) => this.props.storyLike(prop)}
              />
            );
          }

This way you explicitly tell that the child will be passing a prop to the function.

Hopefully your storyLike function is an arrow function that looks like this:

storyLike = (prop) => {
    // code
}