Question

我正在React中构建一个聊天应用程序，但发送消息后它立即崩溃。这是代码的一部分

state ={
    conversationData: null,
    message: ''
};

componentDidMount() {
    this.setState({conversationData: this.props.conversationData});
};

onSendClicked = () => {
    con.addMessage(this.state.conversationData.id, data).then(() => {
        this.setState({message: ''}, () => {
            this.setState({conversationData: this.state.conversationData.message.push(data)});
        });
    });
};

在我的渲染功能中，我拥有

   <List>
         {this.state.conversationData.message !== null && this.state.conversationData.message !== undefined ? 
this.state.conversationData.message.map((mes, index)
........ 
: <div/>....

问题出在那个循环中，当我加载它时工作正常，但是一旦按下发送消息并将状态设置为conversationData，它要么返回空的div，要么从不更新或崩溃如果我消除了.map()，则div的定义是不确定的。我在做什么错了？

Answer 1

根据您当前的代码，这就是我要设置的方式：

state ={
    conversationData: this.props.conversationData, // no need to set it as null then update on mount
    message: ''
};

onSendClicked = () => {
    con.addMessage(this.state.conversationData.id, data).then(() => {
        this.setState(({ conversationData }) => ({
            message: '',
            conversationData: { 
              ...conversationData,
              message: [ ...conversationData.message, data ] // where is this data coming from?
            } // update conversationData with message
    });
};

Answer 2

假设已定义“ con”，并且有一个名为“ addMessage”的方法，该方法不会返回错误

我还假设您输入的是O型，并且数据是通过onSendClicked（data）传入的。

然后我会这样做。特别注意点差操作员

[...this.state.conversationData.message, data.id]

与使用.push（）改变状态相反

以及使用[]初始化sessionData.message状态，以避免在null上发生迭代错误（请检查sessionData.message.length而不是sessionData.message！== null）

state ={
    conversationData: {message:[]},
    message: ''
};

componentDidMount() {
    this.setState({conversationData: this.props.conversationData});
};

onSendClicked = (data) => {
    con.addMessage(this.state.conversationData.id, data)
        .then(() => {
            this.setState({
                message: '',
                conversationData: [...this.state.conversationData.message, data]
            })
        });
};

在渲染中：

<List>
         {
             this.state.conversationData.message.length && this.state.conversationData.message.map((mes, index)=>{
                  //dosomething with mes and index
             })
         }
</List>

React App渲染功能在设置状态之前执行？

2 个答案: