当状态从子组件更新时，状态挂钩更改不会重新渲染父组件

Question

我有一个父组件和一个子组件。子组件是基于父状态值 props 渲染的弹出窗口。子组件是一个弹出窗口，可以完美地呈现来自服务器的初始消息，并且当弹出窗口关闭时，它会更改父 props 的状态。

但是，当来自服务器的辅助消息时，弹出窗口不会再次重新呈现。

子组件基本上是基于当有来自服务器的消息时触发的布尔值来显示/隐藏的。关闭子项会将状态更改回原始值。但是，当第二条消息到来时，子组件不会重新渲染。

我是 React 新手，如何解决这个问题？

家长：

export default function App() {
  var [props, setProps] = useState(false)

  const PropsToFalse = async () => {
    var test = props
    setProps(false)
  }

  useEffect(() => {
    (async () => {
      const newConnection = new HubConnectionBuilder()
        .withUrl('http://10.0.2.2:7008/ChatHub')
        .configureLogging(LogLevel.Debug)
        .withAutomaticReconnect()
        .build()

      newConnection
        .start()
        .then(async () => {
          await newConnection.send('AddToGroupLogin', category, email, loc)
        })
        .catch((error) => {
          console.log(error)
        })

      newConnection.on('receivemessage', (message) => {
        var test = props
        setProps(true)
      })
    })
  })

  return (
    <View style={styles.container}>
      <TabTwoScreen props={props} setProps={PropsToFalse}></TabTwoScreen>
    </View>
  )
}

孩子：

import React, { useEffect } from 'react'
import { StyleSheet, Text, TextInput, View } from 'react-native'
import { Button } from './Button'
import { Modal } from './Modal'

export default function TabTwoScreen(props: any) {
  const [isModalVisible, setIsModalVisible] = React.useState(false)

  useEffect(() => {
    const checkForSubscription = setTimeout(() => {
      setIsModalVisible(() => !isModalVisible)
    }, 1500)
    return () => clearTimeout(checkForSubscription)
  }, [])

  const handleSignUp = () => {
    // sign up the user and close the modal
    setIsModalVisible(() => !isModalVisible)
    props.setProps()
  }

  const handleDecline = () => {
    setIsModalVisible(() => !isModalVisible)
    props.setProps()
  }

  return props.props ? (
    <View style={styles.container}>
      {/* <Text style={styles.title}>Premium stuff here</Text> */}
      <View style={styles.separator} />
      <Modal isVisible={isModalVisible}>
        <Modal.Container>
          <View style={styles.modal}>
            <Modal.Header title="You're just one step away!" />
            <Modal.Body>
              <Text style={styles.text}>
                Want to answer this persons request?!
              </Text>
              <TextInput
                style={styles.input}
                placeholder="email"
                keyboardType="email-address"
              />
            </Modal.Body>
            <Modal.Footer>
              <View style={styles.button}>
                <Button title="No thanks" onPress={handleDecline} />
                <Button title="Lets go!" onPress={handleSignUp} />
              </View>
            </Modal.Footer>
          </View>
        </Modal.Container>
      </Modal>
    </View>
  ) : ""
  )
}

Answer 1

您必须将

setProps

传递给孩子，如下：

<TabTwoScreen props={props} setProps={setProps}>

在子组件上只需调用

setProps && setProps(your params)