时间戳

首页 > 解决方案 > this.state.annonces.map 不是函数

javascript - this.state.annonces.map 不是函数

问题描述

我想在反应时更新状态变量，当我默认设置它时，我的地图功能运行良好。但是现在当我用 setState 更新我的状态变量时，我的响应映射不是一个函数，这是我的代码。

import React from 'react';

class Corps extends React.Component{

    state = {
      annonces : [
        {
          nom : " Karim Ngami",
          annonces: " selon le CEO de google Mr Karim Ngami google lens prends une nouvelle tournure"
        },
        {
          nom : " Brigitte Bami",
          annonces: "Je n'ai jamais douté de mon fils, je savais qu'il sera un grand home"
        },
        {
          nom : "Gladice Ngami",
          annonces: "Le monde est étonné par ces proesses, mais nous non (rire) il savait clairement ou il allait"
        },

      ]
    }

    addAnonces = () =>{

      this.setState({
        annonces : this.state.annonces.push({
          nom : "Nkodi Ngami",
          annonces: "Le monde est étonné par ces proesses, mais nous non (rire) il savait clairement ou il allait"
        })
      })

      console.log(this.state.annonces.length);
    }

    render(){



      return(<div>
                <h5>Mes annonces</h5>
                <div className ="row">

                   <div className="col-sm-10 col-sm-push-1">
                        listes

                      {this.state.annonces.map((item) =>(
            <div className ="row"> 
              <div className="col-sm-4">
                <span>{item.nom} :</span>

              </div>
              <div className="col-sm-7 col-sm-push-1">
                <span>{item.annonces}</span>
              </div>
            </div>) 
            )}
                  <button className="btn-success" onClick={this.addAnonces}> Envoyé </button>
                   </div>
                   <div className="col-sm-10 col-sm-push-1">
                        <form>
                            <label for="nom">Votre nom:</label> <input type="text" id="nom" /><br/>
                            <label for="texte">votre annonce:</label><textarea placeholder="Ecrivez votre annonce" name="texte" id="texte">
                            </textarea><br/>

                        </form>
                   </div>
                </div> 
             </div>
            );  
    }
}

export default Corps;

标签： javascriptreactjs

解决方案

问题是这.map是一种只能在数组上调用的方法。当您setState在您的情况下调用时，您实际上设置annonces为返回array.push，我很确定这是数组的长度，它是一个数字。数字当然不是数组，这就是您不再可以调用的原因.map。

您要做的是设置announces为一个包含新值和旧值的新数组。您可以为此使用扩展运算符，您的代码看起来像这样。

const stateCopy = [...this.state.annonces];
stateCopy.push({
    nom : "Nkodi Ngami",
    annonces: "Le monde est étonné par ces proesses, mais nous non (rire) il savait clairement ou il allait"
})

this.setState({annonces: stateCopy});

当然，这是一种冗长的方式，但它应该突出两件事。

1）您现在不是将通告设置为数字，而是数组

2）您不是在改变数组，而是创建原始副本并将新的副本传递给setState

推荐阅读