时间戳

首页 > 解决方案 > ReactJS：TypeError：this.state.myText.map 不是函数

reactjs - ReactJS：TypeError：this.state.myText.map 不是函数

问题描述

我正在尝试将数组元素的索引传递给函数，在此过程中我收到错误：TypeError: this state.myText.map is not a function

这是我的源代码：

import React, { Component } from 'react';
import ValidateText from './ValidateText';
import CharText from './CharText.js'
import './hwork02.css';

/* general purpose:
1. Input any text
2. Validate its length (min and max)
3. Display each letter as a char
4. if the user clicks on each one, it has to be deleted
class based components
 */

class TextMe extends Component{
    
    state = {
        myText: [],
    }

    //metodo para actualizar el contenido del textbox
    //se usa spreadOperator para no operar de manera directa el objeto
    updateTxtHandler = (event) => {
        //ejemplo de codigo mala practica y que no es ES6
        this.setState({
            myText: event.target.value,
        });
    }

    //funcion para borrar elementos de la lista
    deleteCharacterHandler = (deleteChar) => {
        console.log("La letra que deseo borrar es: "+deleteChar)

    }

    displayArrayContent = () => {
        const letters = [...this.state.myText];
        //iterar todos los elementos del arreglo
        letters.map((letter, index) => {
            console.log("item: " + letter + ", index: "+index)
        });
    }

    render(){  
        return(
            <div className="cajatipo1">
                <h1>Homework02: Text2Chars</h1>
                <div>
                    <h3>Please type any text you want</h3>
                    <input type="text" width="80" placeholder="Type any text greater than 3 characters"
                    value={this.state.myText}
                    onChange={this.updateTxtHandler}
                    />
                    <h3>Using "state" to update this control simultaneously:</h3>
                    <label>{this.state.myText}</label> 
                    {this.state.myText.length>0 ?
                        <p>
                            <ValidateText myTxtLength={this.state.myText.length} />
                            {this.state.myText.map((letter, index) => {
                                <CharText 
                                removeCharacter={() => this.deleteCharacterHandler(index)}
                                />
                            })}
                        </p>
                        : null
                    }
                </div>
            </div>    
        )
    }
}

export default TextMe;

所以，我的主要问题与以下几行有关：

<p>
  <ValidateText myTxtLength={this.state.myText.length} />
  {this.state.myText.map((letter, index) => {
        <CharText 
        removeCharacter={() => this.deleteCharacterHandler(index)}
       />
  })}
</p>

我读过很多，当 var 不是数组时会引发此异常，仅此而已，在我的情况下，该 var 是“myText”，一开始我这样定义它：

state = {
            myText: [],
        }

但是我仍然遇到了异常。我的问题是：为了避免 TypeError 异常，我缺少什么？

感谢您的意见

标签： reactjstypeerror

解决方案

您遇到了错误，因为this.state.myText它是一个字符串。您可以使用[...this.state.myText]在字符串中创建一个字符数组。为了清楚起见，您可能希望将myText状态变量初始化为空字符串。字段值设置为空字符串，input即使初始值是[]因为它被转换为字符串 - [].toString()=> ''。

state = {
  myText: ''
}

另一个问题是您没有在CharText传递给Array.prototype.map方法的回调中返回组件。

{
  [...this.state.myText].map((letter, index) => (
    <CharText removeCharacter={() => this.deleteCharacterHandler(index)} />
  ))
}

推荐阅读