时间戳

首页 > 解决方案 > 如何实现“显示更多”按钮？

javascript - 如何实现“显示更多”按钮？

问题描述

我想实现按钮行为显示更多。
当我单击按钮时，必须在不重新启动的情况下加载新对象。

我会const [data, setData] = useState(users);初始化前 10 个用户。
当我按下按钮时，这个数组data中，我添加了以下 10 个用户

var users = response.data;
for (var i=0; i < users.length; i++) {
  data.push(users[i]);
}
setData(data);

但是浏览器中没有呈现任何内容。

怎么做正确？

const Cards = ({users, bottomUrl }) => {
  const [data, setData] = useState(users);

  const handleSubmit = e => {
    e.preventDefault();

    const page = bottomUrl.slice(-1);
    const axios = require('axios');
    const url = '/users';

    axios.get(url, {
      params: { page: page }
    }, {headers: {'Content-Type': 'application/json'}})
    .then(function (response) {
      var users = response.data;
      for (var i=0; i < users.length; i++) {
        data.push(users[i]);
      }
      setData(data);
    })
    .catch(function (error) {
      console.log(error);
    })
    .then(function () {
      // always executed
    });
  };

  return (
    <div>
      <div className="users-list">
        {data.map((element, elIndex) => (
          <UserCard
            key={elIndex}
            lastName={element.lastName}
            firstName={element.firstName}
            description={element.description}
          />
        ))}
      </div>

      <div className="users-page-button-container">
        <a className="button" onClick={handleSubmit} href={bottomUrl}>Show more</a>
      </div>
    </div>
  )

};

标签： javascriptreactjs

解决方案

您正在推动状态对象data。您必须使用中间变量并将其传递给setData

推荐阅读