React：从按钮 onclick 传递映射数据以显示在另一个组件上

Question

我在传递从 API 映射的数据时遇到一些困难，它根据 API 数组中的事件数量显示一堆事件卡。

这是我的事件卡组件；

export default function EventCard() {
  const classes = useStyles();
  const [data, setData] = useState([]);

  useEffect(() => {
   const fetchData = async () => {
    const result = await axios("http://localhost:23455/Event");
    setData(result.data);
  };
  fetchData();
  }, []);

 const handleClick = (value) => () => {
   console.log(value);
 };

return (
 <div>
  <Row>
    {" "}
    {data.map((item) => (
      <Card
        className={classes.root}
        style={{ marginRight: "25px", marginBottom: "25px" }}
      >
        <CardHeader
          avatar={
            <Avatar aria-label="recipe" className={classes.avatar}>
              {item.icon}
            </Avatar>
          }
          action={
            <IconButton aria-label="settings">
              <MoreVertIcon />
            </IconButton>
          }
          title={item.name}
          subheader="September 14, 2016"
        />
        <CardMedia
          className={classes.media}
          image={LordsLogo}
          title="Paella dish"
        />
        <CardContent>
          <Typography variant="body2" color="textSecondary" component="p">
            <p key={item.id}> {item.description}</p>
            <p key={item.id}> {item.startDate}</p>
            <p key={item.id}> {item.endDate}</p>
          </Typography>
        </CardContent>
        <CardActions disableSpacing>
          <IconButton aria-label="add to favorites">
            <Button variant="outlined">Steward</Button>
          </IconButton>
          <IconButton aria-label="share">
            <Button variant="outlined" onClick={handleClick({ item })}>
              Tickets
            </Button>
          </IconButton>
        </CardActions>
      </Card>
    ))}
  </Row>
</div>
);
}

我有一个 onclick 函数，它记录哪些数据被添加到“值”onclick 中，如果我单击一张卡，控制台会记录该特定卡的值：

我现在想做的是在另一个名为 ServiceForm 的组件中使用此信息。我希望能够单击按钮，链接到 ServiceForm，并使用 ServiceForm 组件中“Item”内的变量，理想情况如下所示；

        <Form.Group as={Col} controlId="formGridForeName">
          <Form.Label>**{item.description}**</Form.Label>
          <Form.Control
            name="firstName"
            placeholder="Enter name"
            onChange={this.handleChange}
          />
        </Form.Group>

EventCard 如果功能组件和 ServiceForm 是基于类的组件，我如何将信息从第一个组件传递到后者？谢谢

编辑：显示组件层次结构

ServiceForm在ServiceApplication中渲染，如图：

import * as React from "react";
import { ServiceForm } from "../components/ServiceForm";

class ServiceApplication extends React.Component {
  render() {
   return (
    <React.Fragment>
      &nbsp; &nbsp;
      <h1>Service Application</h1>
      &nbsp; &nbsp;
      <h6>Users can use this page to apply for tickets.</h6>
      &nbsp; &nbsp;
      <ServiceForm />
    </React.Fragment>
  );
 }
}

export default ServiceApplication;

EventCard组件在EventsPage中渲染，如下图；

import EventCard from "../components/EventCards/EventCard";

class EventsPage extends React.Component {
  render() {
    return (
      <React.Fragment>
        &nbsp; &nbsp;
        <h1>Events</h1>
        &nbsp; &nbsp;
        <h6>
          Welcome to the Events, here you can apply for seats or tickets at the
      events shown below.
        </h6>
        &nbsp; &nbsp;
        <Row>
          <EventCard />
        </Row>
      </React.Fragment>
    );
  } 
}

export default EventsPage;

这个想法是在单击 EventCard 上的“门票”按钮时传递 ID（ID 是从 API 中提取并映射的）。

Answer 1

这实际上是一个如何在应用程序中存储状态的问题。

举一个简单的例子，其中一个组件是另一个组件的子组件。在这种情况下，父级可以在本地存储状态，例如 useState() 并将其作为 props 传递给子级。

const SomeParent = () => {
  const [isTrue, setIsTrue] = React.useState(true)
  return (
    <Child isTrue={isTrue} />
  )
}

在某些情况下，您可能希望在多个组件或整个应用程序之间共享状态。在这种情况下，您有很多不同的选择。

1. 将状态提升至您需要的最高点。

最简单的方法是将多个组件之间共享的状态移动到两个组件共享的最高点。例如

Section component <- store state here
  Parent one
    child one
    child two
  Parent two
    child one

在这里，您可以再次使用 useState() 或将状态存储在 useReducer() 中并向下传递调度。

数据流将如下所示：

1. 初始化节组件中的状态，例如 const [someState, setSomeState]
2. 将 setSomeState 回调传递给父组件，然后将子组件作为 prop 例如
3. 在子组件中使用回调设置状态 onClick 例如 onClick = {() => action(item)}
4. 将状态值传递给第二个父组件，然后传递给子组件，例如
5. 您可以访问表单中的状态

这可以是一个对象或多个状态值。随着复杂性的增加，我倾向于使用 useReducer()。

2. 在应用程序中实现 useContext 或 Redux以创建可从任何组件访问的应用程序状态（这是一个更大的解释，每个方面都有很多资源......

注意：我不确定您为什么在这里使用两组括号：

const handleClick = (value) => () => {
   console.log(value);
 };

当你调用handleClick时，如果你传递一个值，你需要将它切换为箭头函数：

onClick={handleClick({ item })

...

onClick={() => handleClick(item)}