小编dev*_*ato的帖子

子组件中的useSelector重新渲染父组件

我是反应新手,我正在尝试使用 redux,但我注意到每次我的子组件(图标包)更改包中的项目数量时,整个标头组件都会重新渲染。我努力了,

  • 使用备忘录
  • 创建选择器
  • React.memo(标题)

有什么建议么?

在此输入图像描述

标头组件

const Header = ({ currentUser }) => {
    const { hidden } = useSelector(state => state.cart);

    return (
        <div className="header">
            ...
            <div className="options">
                ...
                <CartIcon />
            </div>

        </div>);
};

export default Header;
Run Code Online (Sandbox Code Playgroud)

购物车图标组件

const CartIcon = () => {
    const selectCartItems = createSelector(
        state => state.cart,
        cart => cart.cartItems
    );
    const cartItems = useSelector(selectCartItems);
    const dispatch = useDispatch();

    const totalItemsCount = (cartItems) => {
        return cartItems.reduce((acc, crr) =>
            acc + crr.quantity
            , 0) …
Run Code Online (Sandbox Code Playgroud)

reactjs redux react-redux

1
推荐指数
1
解决办法
2261
查看次数

来自子组件的 @Output 不会触发 Angular 5 中的 EventEmitter

我尝试将 @Output 与事件发射器一起使用,以在子组件和父组件之间进行通信以传递变量。我遵循了本教程:https ://dzone.com/articles/understanding-output-and-eventemitter-in-angular

我查看了与此相关的不同 stackoverflow 问题,但没有一个适合我的情况。

子 HTML

<button (click)="onLinkedClicked();">Click me</button>
Run Code Online (Sandbox Code Playgroud)

儿童 TS

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
.
.
.
export class showcaseMenuComponent implements OnInit {
    @Output() public linkedClicked = new EventEmitter<String>();

    constructor() {}

    onLinkedClicked() {
        console.log('on click child');
        this.linkedClicked.emit('collapsed');
    }
}
Run Code Online (Sandbox Code Playgroud)

它打印日志“点击子项”

父 HTML

 <showcase-menu #topNavMenu [showBranding]="false"
     [showSearch]= "false" (onLinkedClicked)="linkToggler($event)"></showcase-menu>
Run Code Online (Sandbox Code Playgroud)

父 TS

.
.
.
 navMenuState: string;
.
.
.
  linkToggler($event) {
    console.log("partent");
    this.navMenuState = $event;
  }
Run Code Online (Sandbox Code Playgroud)

linkToggler() 永远不会被调用。我在控制台中没有任何错误,

eventemitter angular

0
推荐指数
1
解决办法
1152
查看次数

将UIImageView设置为背景-Swift 4

我想在视图中已存在的所有内容后面设置背景图像。

我试过了 :

override func viewDidLoad() {
    super.viewDidLoad()
    let backgroundImage = UIImageView(frame: UIScreen.main.bounds)
    backgroundImage.image = UIImage(named: "bg-img")
    backgroundImage.contentMode = UIViewContentMode.scaleAspectFill
    self.view.insertSubview(backgroundImage, at: 0)
}
Run Code Online (Sandbox Code Playgroud)

但这没有用(甚至没有添加img)。因此,我导入了ImageView组件并使用Xcode GUI添加了图像,它确实添加了图像,但它位于一切之上。我已经尝试了几个Stack Overflow答案(这是我从上面获得代码的地方),但是我没有任何运气。

我的文件夹结构如下所示:

在此处输入图片说明

我的图像在Assets.xcassets文件夹中。

更新: 我重新启动了Xcode,我的代码正常工作。

uiimageview swift

0
推荐指数
1
解决办法
839
查看次数

如何过滤数组并返回整个对象 - Angular

export class ResultComponent {
    students: AdmissionFormData[]

    constructor(private adStudent: AdmissionFormService) {
        adStudent.adFormGet().subscribe(
            x => this.students = x
        )
    }

    onSubmit(value) {

    }
}
Run Code Online (Sandbox Code Playgroud)

在学生数组中,我有数据。而onSubmit是函数,value是参数“roll”

HTML 文件:

<div class="form">
<div class="col-md-5 offset-md-3">
  <div class="card">
      <div class="card-header text-center">
          <h3 id="form_name" >Search Result</h3>
      </div>

      <div class="card-block">
          <form (ngSubmit)="onSubmit(f.value)" #f="ngForm" >
              <div class="form-group">
                <label for="">Roll</label>
                <input
                type="number" 
                ngModel
                name="reg" 
                #reg="ngModel" 
                [min]="99999"
                placeholder="Ex: 224697"
                class="form-control">
                <p class="text-danger" *ngIf="!reg.valid && reg.touched">Roll Should have at least 6 letter</p>
              </div>
              <input 
              type="submit"
              value="Search" 
              class="btn btn-block btn-outline-success">
          </form>
      </div>
  </div> …
Run Code Online (Sandbox Code Playgroud)

angular angular-arrays

-1
推荐指数
1
解决办法
6万
查看次数