在 REACT TSX 上使用 OnClick 事件更改状态

Question

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

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

这是代码。

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 添加到子组件上的 useEffect(( 中，最终代码为：

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

感谢您的回答！

Answer 1

尝试将另一个 useEffect 添加到您的子组件，并将状态属性添加为依赖项。每次状态更改时都应调用该值。

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

Answer 2

我相信你应该在改变你的状态之前使用preventDefault()。 即：

<Nav.Link
href='#'
onClick={(e)=> {
e.preventDefault();
setStatus('active');
}
}
>
Active
</Nav.Link> 

当您需要覆盖基础 API 的默认行为时，通常会发生这种情况。

Answer 3

编辑：

父组件：

type Status =
| "no-status"
| "active"
| "hold"
| "close"
interface IState {
status: Status;
}
const Main: React.FC = ()=>{
const [status, setStatus] = useState<IState>("no-status");
return(
<div>                
<a href='#'  onClick={()=>setStatus("active")} >Active </a> 
<a href='#' onClick={()=>setStatus("hold")} >Idle </a>
<a href='#' onClick={()=>setStatus("close")}>Close </a>           
<Cardbody status ={status}/>        
</div>     
);
};
export default Main;

子组件

const Cardbody: React.FC = (props: any)=>{
return(
<div>    
{props.status}
</div>     
);
};
export default Cardbody;

__

我还不能解决打字问题 - 但我认为这就足够了

这个解决方案可以进一步优化 - 通过关闭循环，并关闭某些数组/对象中的"活动"、">保持"、">关闭"变量 - 但不幸的是我做不到