要解决子组件的useState重置为初始值的问题,可以使用React的Context API来传递状态。下面是一个包含代码示例的解决方法:
首先,创建一个Context对象:
import React from 'react';
const MyContext = React.createContext();
然后,在父组件中定义状态和更新状态的函数,并将其传递给Context.Provider组件:
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [value, setValue] = useState('initial value');
return (
);
}
export default ParentComponent;
在子组件中,通过useContext钩子获取父组件传递的状态和更新状态的函数,并使用它们来更新和读取状态:
import React, { useContext } from 'react';
import MyContext from './MyContext';
function ChildComponent() {
const { value, setValue } = useContext(MyContext);
const handleClick = () => {
setValue('new value');
};
return (
Current value: {value}
);
}
export default ChildComponent;
现在,当点击子组件中的按钮时,它会更新父组件中的状态,并通过Context API将新的值传递给其他子组件,而不会重置为初始值。