Question

我有以下代码：

MenuItem menuItem;
TextView badgeCounter;
int pendingNotifications = 0;
@Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.home_nav_menu, menu);
            notification = menu.findItem(R.id.notification);
            setting = menu.findItem(R.id.profile_setting);
            searchMenu = menu.findItem(R.id.search);
            menuItem = menu.findItem(R.id.notification);
    
    
            if (loginUser.getUserType() == Constant.PROFESSIONAL_USER_TYPE) {
                searchMenu.setVisible(true);
               if(pendingNotifications == 0){
                    notification.setActionView(null);
    
                }
                else{
                    notification.setActionView(R.layout.activity_notification_badge);
                    View view =notification.getActionView();
                    badgeCounter = view.findViewById(R.id.badge_counter);
                    badgeCounter.setText(String.valueOf(pendingNotifications));
    
                }
            }
            else
                searchMenu.setVisible(false);
            return super.onCreateOptionsMenu(menu);
        }

我想看到的是，当我获取数据时，我应该只看到前两个用户信息，并且在单击“显示更多”之后，它应该显示api中的所有数据信息，并且按钮值应该变为“显示较少”，之后点击“显示较少”，只有前两个用户应停留。如您从我的代码中看到的那样，我尝试了一些操作，但是它的工作方式不正确，请帮助进行纠正。

谢谢您的帮助

Answer 1

请将您的代码添加到stackoverflow。

问题出在splice方法上，它修改了原始数组。

Answer 2

如果我正确理解了您的问题，这是您可以做的：

const shownArray = [...apiData].splice(0, 2);
const showMoreArray = [...apiData];

正如@MihályiZoltán所说，您不想修改原始数组。

然后您可以将代码更改为此：

{isShown && shownArray.map(data => { return <Users {...data} />;})}
{!isShown && showMoreArray.map(data => { return <Users {...data} />;})}

我还认为在此处使用布尔值更容易：

const [isShown, setShow] = useState(false);

然后您可以像这样更改按钮上的文本：

if (isShown === true) {
  setValueButton("Show Less");
} else {
  setValueButton("Show More");
}

在ReactJS中显示更多和更少显示按钮

2 个答案: