reactjs - 使用 REACT TSX 上的 OnClick 事件更改状态

Question

我需要更改一个值的状态，然后重新渲染一个组件。该组件使用新的设置值作为 URL 的一部分来检索相同的数据。

我正在使用 React 和 TypeScript，并创建了两个函数组件，一个更改状态，一个子组件接收该新状态作为道具。

这是代码。

const Main :React.FC = ()=>{

    const [status, setStatus] = useState('hold');

    return(
        <div >
            <Row >
                <Col >
                    <Nav >                    
                        <Nav.Item >
                            <Nav.Link href='#'  onClick={()=>setStatus('active')} >Active </Nav.Link> 
                        </Nav.Item>
                        <Nav.Item >
                            <Nav.Link  href='#' onClick={()=>setStatus('hold')} >Idle </Nav.Link>
                        </Nav.Item>
                        <Nav.Item >
                            <Nav.Link  href='#' onClick={()=>setStatus('close')}>Close </Nav.Link>                   
                        </Nav.Item>
                    </Nav>
                </Col>            
            </Row>
            <Row >            
                <Col >
                    <CardBody status={status} />  // CHILD COMPONENT     
                </Col>                                        
            </Row> 
        </div>       
    );
};
export default Main;

任何想法为什么状态不会改变或为什么它可能不会重新呈现？

编辑

添加子组件代码：

const useFetch = (url:any) => {
    const dataInfo =  fetch(url)
    .then(  response => response.json());    
    return dataInfo;
}

export default  ( status:any ) =>{    

const [chats, setChats] = useState([]);

const estado= status.status;

     useEffect( ()=>{        
        useFetch(`http://localhost:8901/api/chat/2/${estado}`).then(data => setChats(data.message));        
     },[]);

    return (
        <div>            
            {                    
                chats.map((data:IProps, index:any)=>{
                    return (
                      <Accordion key={index}>
                        <Card >
                        <Card.Header >
                            <Accordion.Toggle as={Link} variant="link"  eventKey="0">
                            <Card.Title>  <span> {data.CLIENTNAME}</span> </Card.Title>
                            </Accordion.Toggle>
                        </Card.Header>
                        <Accordion.Collapse eventKey="0">
                            <Card.Body>
                                <Card.Title>{data.COMPANY}</Card.Title>
                                <Card.Text> {data.DESCRIPTION}</Card.Text>                                
                            </Card.Body>
                        </Accordion.Collapse>
                        </Card> 
                        </Accordion>
                    )
                })   
            }
        </div>                  
    );
} 

此代码在页面第一次加载时运行良好。我在父组件上放了一个 {status} ，我看到它的状态正在改变。但我不知道为什么它没有重新渲染子组件。

最终解决方案

将 STATUS 添加到子组件的 useEffect() 中，最终代码为：

     useEffect( ()=>{        
        useFetch(`http://localhost:8901/api/chat/2/${estado}`).then(data => setChats(data.message));        
     },
[status]); // added status here 

感谢您的回答！

标签： reactjstypescript

Answer 1

Try adding another useEffect to your child component and add the status prop as a dependency. That should get called every time the status changes.

useEffect(() => {
    // This should get called every time status changes
    console.log("Status ------>", status);
}, [status])