时间戳

首页 > 解决方案 > ReactJS - 获取数据并发送到另一个组件的正确方法

javascript - ReactJS - 获取数据并发送到另一个组件的正确方法

问题描述

我有一个 Home 组件，它从 API 获取数据并将数据发送到我的模态组件。在这个模态组件中，我将使用这些数据来填写表格。

问题是，在我的模式中，我可以 console.log 来自我的 Home 组件的对象，但我的输入没有获取数据，它们是空的。

就像我的 Home 组件被渲染时一样，即使我没有单击打开我的模态，我的 Home 组件也会将空对象发送到我的 Modal 组件。

我对 React 还很陌生，所以任何提示都将不胜感激。

我的 Home 组件（由于代码太大而进行了一些编辑）：

export default function Home() {
  const token = useSelector(state => state.auth.token)

  const [community, setCommunity] = useState([])
  const [showModalEditCommunity, setShowModalEditCommunity] = useState(false)

  function handleCloseModalEditCommunity() {
    setShowModalEditCommunity(false)
  }

  function handleShowModalEditCommunity() {
    setShowModalEditCommunity(true)
  }

  // fetching data and then saving the response into my community state
  useEffect(() => {
    const getCommunityInformations = async () => {
      const options = {
        headers: {
          Authorization: token,
        }
      }
      try {
        const result = await axios(
          "https://sandbox.herokuapp.com/community/38", options
        )
        setCommunityProducts(result.data)

      } catch (error) {
        toast.error('Failed to fetch data from the server')
      }
    }
    getCommunityInformations()
  }, [])

  return (
    <Container fluid as="section">
      <Row>
        <Col md={8}>
          <S.InviteSponsorSection>
            <div className="d-flex flex-column">
              <p className="title">Your community can do much more!</p>  
            </div>
             <ProfileButton
                backgroundColor="#27b8fe"
                image="/icons/edit.png"
                onClick={handleShowModalEditCommunity}
              />
            // my modal and the data I'm sending
            <ModalEditCommunity
              handleCloseModal={handleCloseModalEditCommunity}
              showModal={showModalEditCommunity}
              community={community}
            />
          </S.InviteSponsorSection>
        </Col>
      </Row>
    </Container>
  )
}

我的模态组件

export default function ModalEditCommunity({ handleCloseModal, showModal, community }) {

  // first two console.log gives me an empty array, because I'm in my Home component, but when
  // I click to open the modal, this console.log show the exact object that is coming from my 
  // Home component, but all the inputs are empty

  console.log('community', community)

  const [name, setName] = useState(community.name)
  const [description, setDescription] = useState(community.description)
  const [facebookPage, setFacebookPage] = useState(community.facebook)

  return (
   <form onSubmit={handleSubmit(onSubmit)}>
      <TextField
         variant="outlined"
         fullWidth={true}
         name="name"
         type="text"
         value={name}
         onChange={e => setName(e.target.value)}
       />
       <TextField
         fullWidth={true}
         variant="outlined"
         name="description"
         multiline
         rows="2"
         value={description}
         onChange={e => setDescription(e.target.value)}
       />
       <TextField
         variant="outlined"
         fullWidth={true}
         name="facebookPage"
         type="text"
         value={facebookPage}
         onChange={e => setFacebookPage(e.target.value)}
        />
   </form>
  )

标签： javascriptreactjs

解决方案

由于更改太多无法尝试，我无法执行您的代码，但我相信问题来自生命周期。

让我们逐步分析应用程序：

  1. Home 加载，初始化状态，触发 XHR 调用，进行第一次渲染。在第一次渲染中，ModalEditCommunity 已经被渲染，但是道具是空的。
  2. 在 ModalEditCommunity 中，触发了第一次渲染。该组件使用空值初始化其状态，因为 XHR 调用尚未完成。
  3. XHR 调用返回。Home 组件更新其状态。这会触发新的渲染。结构保持不变，但道具发生了变化。
  4. 在 ModalEditCommunity 中，状态已经被初始化。它的值是渲染部分中使用的值。所以它不会改变。

如何解决

除非您有数据，否则请确保您不渲染 Modal。这样，在第一次渲染时，状态将被正确初始化。

像这样的东西：

{showModalEditCommunity && (<ModalEditCommunity
     handleCloseModal={handleCloseModalEditCommunity}
     showModal={showModalEditCommunity}
     community={community}
/>)}

推荐阅读