I am very beginner in react and i got stacked with a warning, I can not resolve them even i read a lot about it in the internet.
The warning is:
The App.tsx relevant code parts:
const [selectedMoment, setSelectedMoment] = useState<IMoment | null>(null);
const [editMode, setEditMode] = useState(false);
const handleOpenCreateForm = () => {
setSelectedMoment(null);
setEditMode(true);
}
return (
<Fragment>
<NavBar openCreateForm={handleOpenCreateForm} />
</Fragment>);
The menu is in the NavBar.tsx:
interface IProps {
openCreateForm: () => void;
}
export const NavBar: React.FC<IProps> = ({ openCreateForm }) => {
return (
<Menu fixed='top' inverted>
<Container>
<Menu.Item>
<Button positive content="Moment upload" onClick={openCreateForm} />
</Menu.Item>
</Container>
</Menu>
)
}
They are semantic-ui-react elements. Anybody idea why do i get this warning?
This method is considered legacy, the alternative API is getDerivedStateFromProps .
Here's a sample of what the old method would look like:
class List extends React.Component {
componentWillReceiveProps(nextProps) {
if (nextProps.selected !== this.props.selected) {
this.setState({ selected: nextProps.selected });
this.selectNew();
}
}
// ...
}
The new method works a bit differently:
class List extends React.Component {
static getDerivedStateFromProps(props, state) {
if (props.selected !== state.selected) {
return {
selected: props.selected,
};
}
// Return null if the state hasn't changed
return null;
}
// ...
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.