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

Question

我有一个 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>
  )

Answer 1

我无法执行您的代码，因为更改太多无法尝试，但我相信问题出在生命周期。

让我们一步一步分析应用：

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

如何解决

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

类似这样的：

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