Почему не работает добавление react компонентов через цикл?

Question

[Павел]

При нажатии на кнопку код через ajax достает данные в бд и выводит их через цикл. Но создается лишь один блок с последней записью. Не понимаю почему это так работает, ведь данные точно все туда поступают.

Принимаемые данные:

• ['1', 'Pavel', '1000.25', '2021-10-07']
  
• ['2', 'Anton', '5541', '2021-10-30']
  
• ['3', 'VVV', '1000', '2021-10-14']
  

// В другом файле
const Article = (props) => {
    return (
        <div>
            <h1>Статья</h1>
            {props.name}
        </div>
    );
};


function App() {

  const [article, setArticle] = useState([]);

  function clickHandler () {
    fetch("http://192.168.1.50/text.php", {
      method : "POST",
      header : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=utf-8',
      },
      body : JSON.stringify({ action : 1 })
    })
    .then (response => response.json())
    .then (response => {
      createArticle(response);  
    })
  };

  const createArticle = (element) =>{
    element.forEach(el => {
      setArticle(article.concat( <Article name={el[1]} key={article.length} /> ))
    });
  };

  return (
    <div className="App container my-3">

      <section>
        {article}
      </section>
      
      <button className="btn btn-success" onClick={clickHandler}>Получить данные</button>
    </div>
  );
};

Comments

[0xD34F]

element.forEach(el => {
  setArticle(article.concat( <Article name={el[1]} key={article.length} /> ))
});

Вот бы узнать - кто вас этой чуши научил? Или сами додумались? В любом случае, имеет место быть очередное "чукча не читатель". В смысле - документацию. А стоило бы.

[Aetae]

XD это сильно.

Answer 1

[Denis Masson]

Мама дорогая...

Иди сюда друг, я для тебя открою мир ПРОСТОГО КОДА.

import "./styles.css";

const Article = ({ name }) => {
  return (
    <div>
      <h1>Статья</h1>
      {name}
    </div>
  );
};

function App() {
  const [article, setArticle] = useState([]);

  function clickHandler() {
    fetch("http://192.168.1.50/text.php", {
      method: "POST",
      header: {
        "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
      },
      body: JSON.stringify({ action: 1 })
    })
      .then((response) => response.json())
      .then((response) => {
        setArticle(response);
      });
  }

  return (
    <div className="App container my-3">
      <section>
        {article.map((value, index) => (
          <Article key={index} name={value.name} />
        ))}
      </section>

      <button className="btn btn-success" onClick={clickHandler}>
        Получить данные
      </button>
    </div>
  );
}

Comments

[Павел]

Большое спасибо