在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}/>
    ));
}

现在，您可以像这样重写您的孩子，使其成为无国籍。

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>
    )
}