Javascript React Native：功能组件到类组件

我正在使用

我正在尝试将以下示例转换为类组件：

下面是我提供的代码片段：

constructor(props) {
    super(props);
    this.state = {
        message: [{
            _id: 1,
            text: 'Hello developer',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
            },
        }],
    }
}

componentDidMount() { }

onSend(messageSend = []) {
    this.setState(
        previousMessages => ({
            message: GiftedChat.append(previousMessages, messageSend)
        })
    );
}

render() {
    const chat = <GiftedChat
        messages={this.state.message}
        onSend={(messageSend) => this.onSend(messageSend)}
        user={{
            _id: 1,
        }}
    />;

    if (Platform.OS === 'android') {
        return (
            <KeyboardAvoidingView
                style={{ flex: 1 }}
                behaviour="padding"
                keyboardVerticalOffset={30}
                enabled
            >
                {chat}
            </KeyboardAvoidingView>
        );
    }
}

//send message will no longer overlap/replace 'hello developer'
        onSend(messageSend = []) {
        this.setState(
            previousMessages => ({
                message: GiftedChat.append(previousMessages.messsage, messageSend)
            })
        );
    }

构造函数（道具）{
超级（道具）；
此.state={
信息：[{
_id:1，
文本：“你好，开发者”，
createdAt:新日期（），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://placeimg.com/140/140/any',
},
}],
}
}
componentDidMount（）{}
onSend（messageSend=[]）{
这是我的国家(
以前的消息=>({
消息：GiftedChat.append（以前的消息，messageSend）
})
);
}
render（）{
const chat=this.onSend（messageSend）}
使用者={{
_id:1，
}}
/>;
如果（Platform.OS==='android'）{
返回(
{chat}
);
}
}

然而，在转换成类组件之后，我并没有得到期望的结果。 （）

问题是，当发送新邮件时，它正在“替换”发件人的邮件 我的最新消息

---

下面是基于您的代码的类组件的完整代码

import React from 'react';
import {KeyboardAvoidingView, Platform} from 'react-native';
import { GiftedChat } from 'react-native-gifted-chat';

export default class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        message: [{
            _id: 1,
            text: 'Hello developer',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
            },
        }],
    }
  }

  //send message will no longer overlap/replace 'hello developer'
    onSend(messageSend = []) {
      this.setState(
        previousMessages => ({
            message: GiftedChat.append(previousMessages.messsage, messageSend)
        })
      );
    }

  render() {
    const chat = <GiftedChat
        messages={this.state.message}
        onSend={(messageSend) => this.onSend(messageSend)}
        user={{
            _id: 1,
        }}
    />;

    if (Platform.OS === 'android') {
        return (
            <KeyboardAvoidingView
                style={{ flex: 1 }}
                behaviour="padding"
                keyboardVerticalOffset={30}
                enabled
            >
                {chat}
            </KeyboardAvoidingView>
        );
    } else {
      return chat
    }
  }
}

从“React”导入React；
从“react native”导入{KeyboardAvoidingView，Platform}；
从“react native gifted chat”导入{GiftedChat}；
导出默认类示例扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
信息：[{
_id:1，
文本：“你好，开发者”，
createdAt:新日期（），
用户：{
_id:2，
名称：“反应本机”，
阿凡达：'https://placeimg.com/140/140/any',
},
}],
}
}
//发送消息将不再重叠/替换“hello developer”
onSend（messageSend=[]）{
这是我的国家(
以前的消息=>({
消息：giftechat.append（previousMessages.message，messageSend）
})
);
}
render（）{
const chat=this.onSend（messageSend）}
使用者={{
_id:1，
}}
/>;
如果（Platform.OS==='android'）{
返回(
{chat}
);
}否则{
回话
}
}
}

您也可以将样本签入

上述代码的输出：

constructor(props) {
    super(props);
    this.state = {
        message: [{
            _id: 1,
            text: 'Hello developer',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
            },
        }],
    }
}

componentDidMount() { }

onSend(messageSend = []) {
    this.setState(
        previousMessages => ({
            message: GiftedChat.append(previousMessages, messageSend)
        })
    );
}

render() {
    const chat = <GiftedChat
        messages={this.state.message}
        onSend={(messageSend) => this.onSend(messageSend)}
        user={{
            _id: 1,
        }}
    />;

    if (Platform.OS === 'android') {
        return (
            <KeyboardAvoidingView
                style={{ flex: 1 }}
                behaviour="padding"
                keyboardVerticalOffset={30}
                enabled
            >
                {chat}
            </KeyboardAvoidingView>
        );
    }
}

//send message will no longer overlap/replace 'hello developer'
        onSend(messageSend = []) {
        this.setState(
            previousMessages => ({
                message: GiftedChat.append(previousMessages.messsage, messageSend)
            })
        );
    }

---

显然，我不得不添加

以前的消息。消息

而不是

以前的消息

解决方案：

constructor(props) {
    super(props);
    this.state = {
        message: [{
            _id: 1,
            text: 'Hello developer',
            createdAt: new Date(),
            user: {
                _id: 2,
                name: 'React Native',
                avatar: 'https://placeimg.com/140/140/any',
            },
        }],
    }
}

componentDidMount() { }

onSend(messageSend = []) {
    this.setState(
        previousMessages => ({
            message: GiftedChat.append(previousMessages, messageSend)
        })
    );
}

render() {
    const chat = <GiftedChat
        messages={this.state.message}
        onSend={(messageSend) => this.onSend(messageSend)}
        user={{
            _id: 1,
        }}
    />;

    if (Platform.OS === 'android') {
        return (
            <KeyboardAvoidingView
                style={{ flex: 1 }}
                behaviour="padding"
                keyboardVerticalOffset={30}
                enabled
            >
                {chat}
            </KeyboardAvoidingView>
        );
    }
}

//send message will no longer overlap/replace 'hello developer'
        onSend(messageSend = []) {
        this.setState(
            previousMessages => ({
                message: GiftedChat.append(previousMessages.messsage, messageSend)
            })
        );
    }

---

嗨，谢谢你的建议。然而，我已经设法解决了这个问题。似乎我在

onSend

函数上犯了一个小错误，特别是

previousMessages

参数。