javascript - 在 React 中更改父级的状态时，我的子级值没有改变？

Question

当我单击我的子组件时遇到问题，我希望当我选择我的组件时，所有兄弟组件都会被取消选择，但这不会发生，这是我的源代码，以便您可以了解更多情况。

这是我的父组件:

// All importations are right

import React, { Component } from "react";

import MenuItem from "./MenuItem";

import Grid from "../../../../components/Grid";

import {
faFolderOpen,
faCogs,
faFileInvoice,
faMale,
faList
} from "@fortawesome/pro-light-svg-icons";

import "./style.css";


class MenuLeft extends Component {
   constructor(props) {
    super(props);
    this.state = {
        menuItems: [
            { id: 1, item: "Données personelles", icon: faMale, isSelected: true },
            { id: 2, item: "Synthèse", icon: faFolderOpen, isSelected: false },
            { id: 3, item: "Historique", icon: faList, isSelected: false },
            { id: 4, item: "Analyse de portefeuille", icon: faFolderOpen, isSelected: false },
            { id: 5, item: "Description", icon: faFileInvoice, isSelected: false },
            { id: 6, item: "Documents", icon: faFolderOpen, isSelected: false },
            { id: 7, item: "Opérations", icon: faCogs, isSelected: false }
        ],
    };
}


allDeselected = item => {
    let menuItem = this.state.menuItems;
    menuItem.forEach(function(elm) {
        elm.isSelected = elm.id === item ? true : false;
    });
    this.setState({ menuItems: menuItem });
};

renderItems(items) {
    console.log(items);
    return items.map(item => (
        <MenuItem
            key={item.id}
            id={item.id}
            item={item.item}
            icon={item.icon}
            isSelected={item.isSelected}
            allDeselected={this.allDeselected}
        />
    ));
}

render() {
    console.log(this.state.menuItems);
    return (
        <div className="co-menu">
            <div className="co-menu-left">
                {this.renderItems(this.state.menuItems)}
            </div>
        </div>
    );
}
}

export default MenuLeft;

这是我的子组件 MenuItem :

class MenuItem extends Component {
constructor(props) {
    super(props);
    this.state = {
        isSelected: this.props.isSelected
    };
}

changeBackColor = key => {
    alert(key);
    this.props.allDeselected(key);
    this.setState({ isSelected: !this.state.isSelected });
};

render() {
    console.log("test" + this.props.id + "  : " + this.state.isSelected);
    return (
        <Grid
            onClick={() => this.changeBackColor(this.props.id)}
            container
            className={
                this.state.isSelected
                    ? "co-menu__backcolor co-menu__backcolor--selected"
                    : "co-menu__backcolor"
            }
        >
            <Grid item xs={12} className="co-menu__icon pb-0">
                <div className="co-menu__icon--centered">
                    <FontAwesomeIcon
                        icon={this.props.icon || ""}
                        size="3x"
                        className="co-menu__icon--color"
                    />
                </div>
            </Grid>
            <Grid item xs={12} className="co-menu__text pt-0">
                <Text content={this.props.item} className="co-menu__text--color" />
            </Grid>
            <Grid item xs={12} className="pt-0" />
        </Grid>
    );
}
}

export default MenuItem;

您可以看到，当我单击我的元素时，我在父级中执行 allDeselected 方法，并且使用 console.log 查看我的数据，以下是当我单击第三个项目时得到的结果:

到目前为止都很好，但是执行此操作时 state.isSelected 不会改变，这是我在显示数据时在子渲染方法中收到的消息:

您可以看到第一个(在开始时选择的)必须取消选择，但它保持相同的旧 isSelected 值。

是逻辑问题还是什么？我需要帮助，我们将不胜感激。

Answer 1

我建议您使子组件无状态并从父组件控制所有状态。

在父级中，您需要添加另一个方法。

onMenuClick(key) {
     this.allDeselected(key)
     this.setState((state) => {
          const updatedMenu = state.menuItems.map(menu => {
              if(menu.id === key)
                 return Object.assign({}, menu, { isSelected: !menu.isSelected });
              return menu;
          });
         return {
             ...state,
             menuItems: updatedMenu,
         }
     });
}

然后你就可以像这样传递数据了。

renderItems(items) {
    return items.map(item => (
        <MenuItem {...item} key={item.id} onMenuClick={this.onMenuClick}/>
    ));
}

现在你可以像这样重写你的 child ，使其成为无状态的。

const MenuItem = (props) => {
    const componentClassName = this.state.isSelected
        ? "co-menu__backcolor co-menu__backcolor--selected"
        : "co-menu__backcolor";
    return (
        <Grid
            onClick={() => props.onMenuClick(props.id)}
            container
            className={componentClassName}
        >
            <Grid item xs={12} className="co-menu__icon pb-0">
                <div className="co-menu__icon--centered">
                    <FontAwesomeIcon
                        icon={props.icon || ""}
                        size="3x"
                        className="co-menu__icon--color"
                    />
                </div>
            </Grid>
            <Grid item xs={12} className="co-menu__text pt-0">
                <Text content={props.item} className="co-menu__text--color" />
             </Grid>
             <Grid item xs={12} className="pt-0" />
        </Grid>
    )
}