TypeError: comments.map не является функцией - PullRequest
Новая
       2

TypeError: comments.map не является функцией

0 голосов
/ 25 мая 2020

Я изучаю реакцию и пытаюсь учиться, но я столкнулся с этой ошибкой, когда нажимаю кнопку отправки ::

TypeError: comments.map не является функцией 

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>Comment: {comment} </div>
        })}
      </div>
    </div>
  );
}

export default App;

Код приведен выше, намерение состоит в том, как только я нажимаю кнопку отправки, он генерирует новый комментарий с именем «Комментарий»

Ответы [ 3 ]

1 голос
/ 25 мая 2020

Вызов sendComment устанавливает переменную comments как объект. Но это должен быть массив для доступа к методу map. Вы можете установить комментарии к массиву, когда вы вызываете setComments внутри функции sendComment.

Пример codeandbox 

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 голос
/ 25 мая 2020

Вы определили comments как массив, но вы устанавливаете состояние как Object.

Правильный способ: 

 const sendComment = () => {
     setComments([...comments, 'Comentário'])
  }
1 голос
/ 25 мая 2020

Изначально вы определили комментарии как массив, но когда вы нажимаете на «Отправить», вы устанавливаете комментарии как объект, проверьте это быстрое исправление: 

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;
...