Question

如何使用reactjs正确获取表单提交中的消息计数。

现在要花几个小时才能找到可能的解决方案。

下面的应用程序提交并显示消息信息，并且一切正常。现在，我的任务是在每次用户提交消息时实现一个消息计数器。

这是我为用户实施计数器的操作

var senderId ='Nancy101';
const {textCount} = this.state;
var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;
textCount[senderId] = count;

alert('am counting: ' +count);

在上面添加textcount方法之后，这是我的问题

每次提交表单时都会出错

Uncaught TypeError: Cannot read property 'Nancy101' of undefined

at bundle.js:109988

这是引起问题的代码行

var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;

这是代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
message: '',
    };

 this.sendMessage = this.sendMessage.bind(this);
  }

  componentDidMount() {
  var textCount = [];
  }




 sendMessage = (message_text) => {

 alert(message_text);


 this.setState({

      data: [
        { id: "1", name: "Nancy101", message: "Hello from User1"}
      ]
    });



        }

  render() {

    return (

          <div>


                                 <input type="text"  placeholder="Message" value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                                <br/>
                                <span onClick={ () => this.sendMessage(this.state.message)}>Submit</span>

{this.state.data.map((message, i) => {

if (message.message !=='' && message.name !=='') {

//var senderId=message.name;
var senderId ='Nancy101';
const {textCount} = this.state;
var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;
textCount[senderId] = count;

alert('am counting: ' +count);



          return (
            <div key={i}>
       <div>   
 {message.name}: {message.message}
            </div>
              </div>
          )


  } else {

//alert nothing.


  }
        })}



          </div>

    );
  }
}

Answer 1

此问题之所以发生，是因为您试图从state获取textCount。但是，您所在的州没有名为const { textCount } = this.state;的密钥。

这就是你在做什么。

const textCount = this.state.textCount;

是这个意思。

Nancy101

由于状态对象没有该键，因此返回的状态是不确定的。

然后，您尝试从undefined对象获取名为textCount的键的值，这就是为什么会出现该错误的原因。

您可以通过在构造器中的初始状态添加constructor(props) { super(props); this.state = { data: [], message: '', textCount: {}, };来解决此问题。

const {textCount} = this.state;

现在您有了一个对象，而不是在这里{}中未定义。 `var count = textCount[senderId] == undefined ? 1 : textCount[senderId] + 1;`

此外，您可以更新此行。

`let count = !textCount[senderId] ? 1 : textCount[senderId] + 1;`

对此。

!textCount[senderId]

使用此0，它将检查您等于undefined，''或library(dplyr) library(ggplot2)的数据。

如何使用reactjs在表单提交时正确获取消息计数

1 个答案: