我的第一张卡片的默认状态是 false(reversed)，即使我把它设置为 true（默认）

Question

当我的卡片出现时，第二张卡片默认正确设置，但第一张卡片设置相反。我该如何解决？我也希望我的第一张卡设置为默认值。 defaultcard1 的状态设置为 true，但当组件加载到我的页面时，就好像它被设置为 false。我试图将它设置为 false 以查看它是否反转它但它仍然开始为 false。

import React, { Component } from 'react';
import { Link } from "react-router-dom";
import './RestaurantMenuSoftDrink.css';

class RestaurantMenuSoftDrink extends Component {
    state = {
        defaultcard1: true
        
    };
    state = {
        defaultcard2: true
    };

    render() {

    return (
<div className="restaurant-menu">

    <div className="menu-container">
    
        {this.state.defaultcard1 ? 
        
            <div className="menu-card-container">
                <div>
                    <button className="menu-card-button-container" onClick={() => {this.setState({ defaultcard1: false });
                    }}>
                    <div className="softdrink1"></div>
                    <h1 className="menu-text">Softdrink 1</h1>
                    </button>
                </div>
            </div> : 
            <div className="menu-card-container">
            <div className="menu-card-button-container">
                <button className="button-text-reverse" onClick={() => {this.setState({ defaultcard1: true });
                }}>
                <h1>
                Softdrink 1
                </h1>
                <h2>
                Item detail
                </h2>
                <h2>
                    Price
                </h2>
                </button>
            </div>
            </div>
        
        }

        {this.state.defaultcard2 ? 
        
        <div className="menu-card-container">
            <div>
                <button className="menu-card-button-container" onClick={() => {this.setState({ defaultcard2: false });
                }}>
                <div className="softdrink2"></div>
                <h1 className="menu-text">Softdrink 2</h1>
                </button>
            </div>
        </div> : 
        <div className="menu-card-container">
        <div className="menu-card-button-container">
            <button className="button-text-reverse" onClick={() => {this.setState({ defaultcard2: true });
            }}>
            <h1>
            Softdrink 2
            </h1>
            <h2>
            Item detail
            </h2>
            <h2>
                Price
            </h2>
            </button>
        </div>
        </div>
    
    }
        
    </div>

    <div className="backtomenubutton-container">
        <Link exact to="/restaurant/menu/drink" className="menu-button-text">
            <button className="backtomenubutton">
                <h1>Back to Drinks</h1>        
            </button>
        </Link>
    </div>

</div>
    );
    }
}

export default RestaurantMenuSoftDrink

Answer 1

问题

出于某种原因，您声明了两个 state class 属性。

state = {
  defaultcard1: true
};
state = {
  defaultcard2: true
};

第二个可能会覆盖第一个，因此，this.state.defaultcard1 是未定义的，或者无论您最初将其设置为什么都是假的。

解决方案

在单个状态对象中声明所有状态值：

state = {
  defaultcard1: true,
  defaultcard2: true
};

我的第一张卡片的默认状态是 false(reversed)，即使我把它设置为 true（默认）

my first card's default state is false(reversed) even though I put it at true (default)

state

reactjs

card

问题

解决方案