React - 在组件内部未定义

Question

我遇到了问题，当我将值从子级传递给父级时它可以工作但是当我想将它从父级推送到“祖父母”时它会告诉我'这个'是未定义的并且我不能将函数传递为'功能= {this.functionName}“

这是让我遇到问题的组件：

class MessageList extends Component {
constructor (props) {
    super(props);
    this.state = {
        applyFor: ''
    }
    this.updateApply = this.updateApply.bind(this);
}

updateApply = (posName) => {
    this.setState({
        applyFor: posName
    })
}...

这是我的渲染功能

render() {
    return(
    this.props.messages.map(function(message, index){
        if(message.type === 'out') { 
            if(message.qType === 'quick reply'){
                return (
                    <React.Fragment>
                        <BotTextMessage key={index} message={message.message.text} />
                        <FadeIn>
                            <QuickReplyWrapper key={index} options={message.message.options} />
                        </FadeIn>
                    </React.Fragment>
                ); 
            } else {
                return <BotTextMessage key={index} message={message.message.text} />;
            }
        } else {
        // console.log(this)
        return  <OpenPositionWrapper updateApply={this.updateApply}/>

        }
    }));

}

当我记录它时，它是未定义的，对于'updateApply'，它给了我：

  

MessageList.js：65未捕获的TypeError：无法读取未定义的属性“updateApply”

Answer 1

你可以试试这个：

render() {
    return(
    this.props.messages.map((message, index) => {
        if(message.type === 'out') { 
            if(message.qType === 'quick reply'){
                return (
                    <React.Fragment>
                        <BotTextMessage key={index} message={message.message.text} />
                        <FadeIn>
                            <QuickReplyWrapper key={index} options={message.message.options} />
                        </FadeIn>
                    </React.Fragment>
                ); 
            } else {
                return <BotTextMessage key={index} message={message.message.text} />;
            }
        } else {
        // console.log(this)
        return  <OpenPositionWrapper updateApply={this.updateApply}/>

        }
    }));

}