从两个不同的父母向子组件传递道具

Question

我是新手，我正在尝试弄清楚如何实现以下内容。 目标是将以下道具从父母传递给孩子

Parent Component: Supermarket
Child Component: Modal
Props: show,onHide,supermarketid

Parent Component: SupermarketMembers
Child Component: Modal
Props: memberNames

Parent Component:Modal
Child Component:SupermarketMembers
Props: supermarketid

让我告诉你一些关于我的实现：

我有一个名为Supermarket 的组件，它基本上由一个城市中所有可用超市的按钮组成。当点击其中一个超市按钮时，该组件会调用另一个 Modal 组件，并带有一些类似这样的道具

      <Modal
        show={modalShow}
        onHide={() => setModalShow(false)}
        supermarketid = {supermarketid}
      />

到目前为止，一切都很顺利，当我单击按钮时，会呈现一个模态。

在 Modal 组件中，我有一个带有下拉菜单的表单，我想用 Axios Post 响应填写该超市工作人员的所有姓名。

所以，我创建了第三个名为SupermarketMembers 的组件，它返回超市中的成员，当我在SupermarketMembers 组件中console.log(memberNames) 时，值会正确显示。但问题是我似乎无法将memberNames 状态传递给Modal 组件。那里没有定义。

SupermarketMembers 组件

function SupermarketMembers() {
  const [memberNames, setMemberNames] = useState([]);
  const token = localStorage.getItem("Token");
  useEffect(() => {
    axios
      .post(
        "/viewMemberInSupermarket",
        {
          supermarketid: 1,  //display statically for now till I know how to pass it
        },
        {
          headers: {
            "auth-token": token,
          },
        }
      )
      .then((response) => {
        let tempArr = [];
        response.data.forEach((element) => {
          tempArr.push(element.member.name);
        });

        setMemberNames(tempArr);
        console.log(memberNames) //displays array correctly
        <Modal memberNames={memberNames} />; //trying to pass memberNames props to Modal
      })
      .catch((err) => {
        
      });
  }, [memberNames]);
  return <div></div>;
}

这是模态组件：

const [dropDownValue, setDropDownValue] = useState("");

 const handleChange = (e) => {
    setDateValue(e.target.value);
  };

  const onDropdownSelected = (e) => {
    setDropDownValue(e.target.value);
  };
return(
  <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered>
      {console.log({...props})}; // prints --> {show: false, supermarketid: "", onHide: ƒ}
      <Modal.Body>
            <div className="container">
              <Row>
                <Col sm={10}>
                  <Form>
                    <Form.Group controlId="SuperMarketId">
                      <Form.Label>
                           <p>SuperMarket Members</p>
                      </Form.Label>
                    <Form.Control
                      as="select"
                      value={dropDownValue}
                      onChange={onDropdownSelected}></Form.Control>
                    </Form.Group>
                  </Form>
                </Col>
              </Row>
            </div>
     </Modal.Body>
</Modal>
)

这里当我尝试console.log({...props}) 时，它只显示从Supermarket 组件发送的道具，而不是SupermarketMembers 组件。

如何在Modal 组件中获取memberNames 状态？我什至要在哪里调用组件SupermarketMembers？ &我如何将Supermarket传递给Modal组件的supermarketid prop传递给SupermarketMembers？

Answer 1

我认为你需要在 SupermarketMembers 的 jsx 返回中传递 Modal 组件。

function SupermarketMembers() {
  const [memberNames, setMemberNames] = useState([]);
  const token = localStorage.getItem("Token");
  useEffect(() => {
    axios
      .post(
        "/viewMemberInSupermarket",
        {
          supermarketid: 1,  //display statically for now till I know how to pass it
        },
        {
          headers: {
            "auth-token": token,
          },
        }
      )
      .then((response) => {
        let tempArr = [];
        response.data.forEach((element) => {
          tempArr.push(element.member.name);
        });

        setMemberNames(tempArr);
        console.log(memberNames) //displays array correctly             
      })
      .catch((err) => {
        
      });
  }, [memberNames]);
  return <div><Modal memberNames={memberNames} /></div>;
}

---

您在 Modal 组件中传递 {...props} ，但它没有读取为下拉值...顺便说一句，我认为您可以解决更简单的组件层次结构。例如，您不需要单独的组件来从远程源获取数据。你可以这样：

-> SuperMarkets
--> SuperMarket
---> Modal

将您的 SupermarketId 传递给 Modal 组件，然后在内部，使用 useEffect(()=>{},[]) 获取 memberNames，然后填写存在于同一组件内的选择表单控件