Javascript 如何动态显示模式中显示的内容

如果我在

它应该显示（同样，如果我逐个写出状态，它确实会这样显示）：

如何正确地使用循环来动态实现这一点

这是我的密码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Modal from 'react-modal';

import Aux from '../../../../hoc/Aux';
import FoodButton from '../FoodButtons/FoodButton';
import CheckoutButton from '../CheckoutButton/CheckoutButton';
import axios from '../../../../axios-foodChosen';

import { CLOSE_MODAL, OPEN_MODAL } from "../../../../store/action/NoNameAction";

class TacoTypes extends Component {
    state = {
        items: {
            cTacoClicked: false,
            cTaco: '',

            bTacoClicked: false,
            bTaco: '',

            cBurritoSelected: false,
            cBurrito: ''
        }
    }

    componentWillMount() {
        // for modal
        Modal.setAppElement('body');
    }

    chickenTaco() {
        // modal
        const cTacoSelected = "Chicken Taco";
        this.setState({cTacClicked: true, cTaco: cTacoSelected});
    }

    beefTaco() {
        // modal
        const bTacoSelected = "Beef Taco";
        this.setState({bTacoClicked: true, bTaco: bTacoSelected});
    }

    chickenBurrito() {
        // modal
        const cBurritoSelected = "Chicken Burrito";
        this.setState({cBurritoSelected: true, cBurrito: cBurritoSelected });
    }

    render() {
        return (
            <Aux>
                <FoodButton clicked={() => this.chickenTaco()} label={"Chicken Taco"}/>
                <FoodButton clicked={() => this.beefTaco()} label={"Beef Taco"}/>
                <FoodButton clicked={() => this.chickenBurrito()} label={"Chicken Burrito"}/>

                <CheckoutButton clicked={() => this.props.openModalRedux()}/>

                <Modal isOpen={this.props.isOpen}>
                    <p>
                        {
                            Object.keys(this.state.items).map(i => (
                                <p>{i}</p>
                            ))
                        }
                    </p>
                    <button onClick={() => this.props.closeModalRedux()}>Close</button>
                </Modal>
            </Aux>
        );
    }
}

const mapStateToProps = state => {
    return {
        // props for modal
        isOpen: state.global.isModalOpen,
    }
};

const mapDispatchToProps = dispatch => {
    return {
        // Modal handlers
        openModalRedux: () => dispatch({type: OPEN_MODAL}),
        closeModalRedux: () => dispatch({type: CLOSE_MODAL})
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(TacoTypes);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“反应模态”导入模态；
从“../../../../hoc/Aux”导入辅助对象；
从“../FoodButtons/FoodButton”导入FoodButton；
从“../CHECKBURTON/CHECKBURTON”导入CHECKBURTON；
从“../../../../axios foodChosen”导入axios；
从“../../../../store/action/NoNameAction”导入{CLOSE\u model，OPEN\u model}”；
类TacoTypes扩展组件{
状态={
项目：{
点击：错误，
cTaco:“，
B:错误，
bTaco:“”，
cBurritoSelected:false，
cBurrito:'
}
}
组件willmount（）{
//对于模态
Modal.setAppElement（“主体”）；
}
奇肯塔科（）{
//模态
const cTacoSelected=“鸡肉塔可”；
this.setState（{cTacClicked:true，cTaco:cTacoSelected}）；
}
beefTaco（）{
//模态
const bTacoSelected=“牛肉塔可”；
this.setState（{btacoclicated:true，bTaco:bTacoSelected}）；
}
chickenBurrito（）{
//模态
const cBurritoSelected=“鸡肉煎饼”；
this.setState（{cBurritoSelected:true，cBurrito:cBurritoSelected}）；
}
render（）{
返回(
this.chickenTaco（）}label={“Chicken Taco”}/>
this.beefTaco（）}标签={“牛肉塔可”}/>
this.chickenBurrito（）}label={“鸡肉煎饼”}/>
this.props.openModalRedux（）}/>

{
Object.keys（this.state.items）.map（i=>(
{i}

))
}

this.props.closeModalRedux（）}>Close
);
}
}
常量mapStateToProps=状态=>{
返回{
//模态分析的道具
isOpen:state.global.isModalOpen，
}
};
const mapDispatchToProps=调度=>{
返回{
//模态处理程序
openModalRedux:（）=>调度（{type:OPEN_MODAL}），
closeModalRedux:（）=>分派（{type:CLOSE_MODAL}）
}
};
导出默认连接（MapStateTrops、mapDispatchToProps）（TacoTypes）；

你的代码很乱。您的代码结构是固定的，这意味着每个taco类型都必须单独声明，并使用不同的方法声明

代码的主要问题是在读取的状态中有

项

，但是在

*Taco（）

方法和

chickenBurrito（）

方法中设置了

this.state.cTaco

（例如），而不是

this.state.items.cTaco

但是您的代码总体上可以而且应该得到改进。对于每种玉米卷类型，您可以执行以下操作，而不是单独使用一种方法：

将您的状态结构更改为：

this.state = {
  selectedItem: '',
};

并在构造函数中声明以下对象：

this.items = {
  // If you'll have more attributes for each item, it's best that you set
  // each item as an object with a name and the other attributes.
  chickenTaco: 'Chicken Taco',
  beefTaco: 'Beef Taco',
  chickenBurrito: 'Chicken Burrito',
};

然后，您可以使用一种方法而不是三种方法（或者无论您有多少项）：

现在，模态的内容将如下所示：

{this.items.map(item => (<p key={item}>{item}</p>)}

{this.items.map（item=>（
{item}
）}

---

更干净。通过这种方式，项目是动态的，您可以轻松添加属性和项目。在实际使用中，您可能会从后端获得此信息，您无法预测每个项目需要创建哪些方法，或者您将拥有多少项目（如果有的话）.

您当前仅使用

项

对象的键。您希望获取键在

状态

对象中的值

<Modal isOpen={this.props.isOpen}>
  <p>
    {Object.keys(this.state.items).map(key => (
      <p key={key}>{this.state[key]}</p>
    ))}
  </p>
  <button onClick={() => this.props.closeModalRedux()}>Close</button>
</Modal>

{Object.keys（this.state.items）.map（key=>(
{this.state[key]}
))}

this.props.closeModalRedux（）}>Close

啊，我以前已经试过了，但由于某种原因它不起作用：（@sp92对不起，我误解了。试试更新的答案。好吧，现在这个就起作用了！我真的有和你以前一样的东西，它让我发疯了为什么它不起作用。谢谢你，Thole:D！

this.items = {
  // If you'll have more attributes for each item, it's best that you set
  // each item as an object with a name and the other attributes.
  chickenTaco: 'Chicken Taco',
  beefTaco: 'Beef Taco',
  chickenBurrito: 'Chicken Burrito',
};

selectItem(item) {
  this.setState({selectedItem: item});
}

{this.items.map(item => (<p key={item}>{item}</p>)}

<Modal isOpen={this.props.isOpen}>
  <p>
    {Object.keys(this.state.items).map(key => (
      <p key={key}>{this.state[key]}</p>
    ))}
  </p>
  <button onClick={() => this.props.closeModalRedux()}>Close</button>
</Modal>