警告:在呈现其他组件("SwiperSlide")时无法更新组件("App")

Question

我是react的初学者请帮助解决这个问题

Gate.js

function sendData(send) {
props.setGet(send);
}
...
<SwiperSlide id='slide01'>
{({ isActive }) => (
<div className='nav_title'>
{ isActive === true ? sendData("1") : null}
...
</div>
)}
</SwiperSlide>
}

Apps.js

const [get, setGet] = useState('');
...   
<Gate setGet={setGet}/>
<Contents value={get}/>
...

Contents.js

const value = props.value;
...
<div className='contents'>
{value === "1" ? <div className='show_animation'><Offers/></div> : null}
{value === "2" ? <div className='show_animation'><Booking/></div> : null}
{value === "3" ? <div className='show_animation'><About/></div> : null}
{value === "4" ? <div className='show_animation'><Guide/></div> : null}
</div>
...

我想这样做
在这里输入图像描述

2页自动连接

Answer 1

这是我认为基于照片的代码组件结构的简化版本。

我也不确定这是否是你想要实现的目标。如果你打算在组件之间共享状态，并在子组件中更新该值，这就是你可以做到的。

您应该始终意识到哪些组件将需要状态，并尝试将您的有状态逻辑放在所有需要它的子级的父级中。

一旦你有了它，你就需要决定哪些子组件将更新这个状态，如果它恰好在Contents组件中，就像本例中一样，那么你需要将一个函数道具传递给那个子组件。在本例中，它在SomethingChanged=｛handleChange｝上。然后要更新handleChange函数，需要在调用onSomethingChanged函数的子组件中使用useCallback。

const App = () => {
const [statefulLogic, setStatefulLogic] = useState('');
//because state is updateed in this parent component, any children receiveing props will update with this;
const handleChange = (props) => {
setStatefulLogic(props)
}
return (
<>
<Gate yourprops={statefulLogic} />
<Contents onSomethingChanged={handleChange} yourprops={statefulLogic}/>
{/** when useCallback is called this function /handleChange/ will be called with the arguments given in the useCallback  */}
</>
)
}

const Gate = (props) => {
useEffect(() => {
console.log(props.yourprops)
}, [props]) // when props is updated this useEffect will run

return (
<>
<children />
<children />
</>
)
}

const Contents = (props) => {
const newValue = ''; 
const handleCLick = useCallback(() => {
props.onSomethingChanged(newValue)
}, [props]) // this dependency may be different depending on your use case
// this useCallback will pass the newValue back to the parent component

return (
<>
<children />
<children />
<button onClick={handleClick}>Click me</button>
// when this is clicked, the useCallback updates state in the parent component
//  and that updates the state in all children which are using that state 
</>
)
}