React：使用 .map 从多个数组中获取道具

Question

我正在使用 MERN 和 Redux 构建一个 ERP 风格的应用程序。我的后端运行良好，我可以通过我的 API 添加东西，但是我的前端有一些愚蠢的问题。

我的想法是我有项目对象并想通过模式访问它们。模态框本身起作用，打开模态框的按钮实际上是通过循环获取对象的名称。

问题出在 ModalBody 中 - 它仅从 table 中的第一个对象获取信息。我已经尝试了 this.props.customer、items.customer、this.items.customer 等方法，但没有成功。

如果我也可以将组件导出为 class 就好了，但如果这不可能，我想也没关系。

你们知道我如何让它发挥作用吗？

render(){
  const { items } = this.props.item;

  return (
    <Container>
      <ListGroup>
        <TransitionGroup className="shopping-list">
          {items.map(({ _id, name, customer, location, dilemma }) =>
            <CSSTransition key={_id} timeout={500} classNames="fade">
              <ListGroupItem key={_id}>
                <Button color="light" style={{ width: "100%" }} onClick={this.toggle}>{name}</Button>
                <Modal isOpen={this.state.modal} toggle={this.toggle}>
                  <ModalHeader toggle={this.toggle} key={_id}>{name}</ModalHeader>
                  <ModalBody key={index}>
                    <p>Customer: {customer}</p>
                    <p>Location: {location}</p>
                    <p>Dilemma: {dilemma}</p>
                  </ModalBody>
                </Modal>
              </ListGroupItem>
            </CSSTransition>
          )}
        </TransitionGroup>
      </ListGroup>
    </Container>
  );
}

Answer 1

我不确定你的数组是什么样子，但你试过像这样使用 map() 吗？

{
  items.map((item, key) =>
    <CSSTransition key={key} timeout={500} classNames="fade">
      <ListGroupItem key={item._id}>
        <Button color="light" style={{ width: "100%" }} onClick={this.toggle}>{item.name}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle} key={item._id}>{item.name}</ModalHeader>
          <ModalBody key={key}>
            <p>Customer: {item.customer}</p>
            <p>Location: {item.location}</p>
            <p>Dilemma: {item.dilemma}</p>
          </ModalBody>
        </Modal>
      </ListGroupItem>
    </CSSTransition>
  )
}

您是否还希望在一个特定模式中呈现数组中的所有项目，或者您想用数组中的项目填充一个模式？在最后一种情况下，最好只渲染一个模式并将该特定项目的项目道具传递给模式。

Answer 2

我不确定我明白你的意图，但我会将 items 数组作为 prop 传递给 Modal 组件，然后在 Modal 组件中使用 AFTER模态体。你现在的做法是为 items 数组中的每个项目渲染很多东西（包括模态）。

Answer 3

您不需要为每个项目生成一个模式。只需列出项目并创建一个模式。之后，当单击某个项目时，将相关项目传递给模态并设置为可见。

我为你制作了一个小样本。

import React, { Component } from 'react';
import { render } from 'react-dom';

const Modal = (props) => {
  return (
    props.visible ? (
      <div>
        Product info
        <hr />
        <h3>{props.item.name}</h3>
      </div>
    ) : ""
  )
}

class App extends Component {
  constructor() {
    super();
    this.state = {
      selectedItem: null,
      modalState: false
    };
  }

  data = [{
    id: 1,
    name: "p1"
  }, {
    id: 2,
    name: "p2"
  }, {
    id: 3,
    name: "p3"
  },
  ]

  handleItemClick = (id) => {
    this.setState({
      modalState: true,
      selectedItem: this.data.find(a => a.id === id)
    })
  }

  render() {
    const { modalState, selectedItem } = this.state

    const mappedList = this.data.map(
      (i) => (
        <li key={i.id} onClick={() => this.handleItemClick(i.id)}>{i.name}</li>
      )
    );

    return (
      <div>
        <ul>{mappedList}</ul>
        <Modal visible={modalState} item={selectedItem} />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

https://stackblitz.com/edit/react-gheoek

React：使用 .map 从多个数组中获取道具

React: Getting props from multiple arrays using .map

javascript

bootstrap-modal

reactjs

mern