Estou estudando react e tentando aprender, mas me deparei com este erro quando clico no botão enviar:

TypeError: comments.map no es una función

import React, { useState } from 'react';

function App() {

  const [comments, setComments] = useState(['Comment1', 'Comment 2', 'Etc'])

  const sendComment = () => {
    setComments({
      [comments]: [...comments, 'Comentário']
    })
  }

  return (
    <div>
      { /* New comment */ }
      <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button onClick={sendComment}>Enviar</button>
      </div>
      { /* Comments */ }
      <div>
        { /* Comment */ }
        {comments.map( (comment) => {
          return <div>Comentário: {comment} </div>
        })}
      </div>
    </div>
  );
}

export default App;

O código é esse acima, a intenção é assim que eu clicar no botão enviar ele irá gerar um novo comentário com on nome "Comentário"

0
Paulo Henrick 25 may. 2020 a las 21:49

3 respuestas

La mejor respuesta

Llamar a sendComment establece la variable comments como un objeto. Pero debería ser una matriz para acceder al método map en él. Puede configurar los comentarios en una matriz cuando llame a setComments dentro de la función sendComment.

Ejemplo codesandbox

import React, { useState } from "react";

function App() {
  const [comments, setComments] = useState(["Comment1", "Comment 2", "Etc"]);

  const sendComment = () => {
    setComments([...comments, "Comentário"]);
  };

  console.log(comments);

  return (
    <div>
      {/* New comment */}
      <div>
        <textarea name="" id="" cols="30" rows="10" />
        <button onClick={sendComment}>Enviar</button>
      </div>
      {/* Comments */}
      <div>
        {/* Comment */}
        {comments.map(comment => {
          return <div>Comentário: {comment} </div>;
        })}
      </div>
    </div>
  );
}

export default App;

1
subashMahapatra 25 may. 2020 a las 19:00

Originalmente definió los comentarios como una matriz, pero cuando hace clic en enviar, configura los comentarios para que sean un objeto, verifique esta solución rápida:

import React, { useState } from "react";

function App() {
  const [comments, setComments] = useState(["Comment1", "Comment 2", "Etc"]);

  const sendComment = () => {
    setComments((comments) => [...comments, "Comentário"]);
  };

  return (
    <div>
      {/* New comment */}
      <div>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button onClick={sendComment}>Enviar</button>
      </div>
      {/* Comments */}
      <div>
        {/* Comment */}
        {comments.map((comment) => {
          return <div>Comentário: {comment} </div>;
        })}
      </div>
    </div>
  );
}

export default App;
1
Mohamed El-Refaie 25 may. 2020 a las 18:54

Ha definido comments como una matriz, pero está configurando el estado como un Objeto.

La forma correcta es:

 const sendComment = () => {
     setComments([...comments, 'Comentário'])
  }
1
Emile Bergeron 25 may. 2020 a las 21:38