#reactjs #typescript #state #this #react-props
#reactjs #typescript #состояние #это #react-props
Вопрос:
Первый пост и новый для реакции.
У меня возникла проблема, из-за которой, когда я пытаюсь использовать a prop
в функции вне рендеринга, undefined
и при попытке использовать его для установки значения состояния, он не работает.
Я прочитал об этом и нашел много ответов, в основном о том, что все функции должны быть привязаны к классу или использовать метод arrow, поэтому при обращении к this
функции внутри функции он ссылается на класс.
Похоже, ни один из них не работает.
Любая помощь была бы весьма признательна.
Ниже приведен код, который я использую.
Я вызываю EntryForm
компонент из другого компонента, передавая значение 5 userDetails.Id
.
export interface UserDetails {
Id: string;
}
export interface IProps {
userDetails: UserDetails
}
export interface IState {
combinedURL: string;
}
export default class EntryForm extends React.Component<IProps, IState> {
constructor(props : IProps) {
super(props);
this.state = {
combinedURL: 'MonkeyFace12' as string
};
this.createCombinedURL = this.createCombinedURL.bind(this);
}
async createCombinedURL() {
try {
this.setState({ combinedURL: 'This is the Start of the URL followed by ' this.props.userDetails.Id });
} catch (e) {
console.log("Error setting CombinedURL");
}
}
async componentDidMount() {
try {
await this.createCombinedURL();
} catch (error) {
}
}
render() {
return (
<>
<FormGroup row>
<Label
sm={1}>
Client
</Label>
</FormGroup>
<Button color="primary" type="submit">
Sign in
</Button>
</>
);
}
}
Когда я проверяю значение this.state.CombinedURL
, оно по-прежнему равно MonkeyFace12.
Функция CreateCombinedURL
, похоже, вообще не влияет на нее.
Комментарии:
1. Итак, если я правильно вас понял, вы говорите, что при вызове this.setate это не работает? Наконец, если вы новичок в React, почему бы вам не использовать обычный JavaScript, пока вы не освоитесь с React, чем вы можете добавить TypeScript.
2. Привет и большое спасибо за ваш ответ. Да, когда он запускает команду this.setState({ combinedURL: ‘Это начало URL-адреса, за которым следует ‘ this.props.UserDetails . Id }); он не устанавливает состояние combinedURL. Он остается как MonkeyFace12. Также во время отладки this.props.UserDetails . Идентификатор оценивается как «неопределенный».
3. Я понимаю, что вы говорите, но советую, когда вы только что вошли в React, не пытайтесь добавлять TypeScript в микс, вы просто загоняете себя в кроличью нору
Ответ №1:
Я был похож на тебя не так давно. Я действительно обнаружил, что использование функций со стрелками работает более плавно для многих ситуаций, с которыми я сталкивался, и я пришел из Java, где классы являются ключевыми.
На мой взгляд, функции и хуки со стрелкой также выглядят намного аккуратнее. Вам вообще не нужно беспокоиться о ключевом слове ‘this.’. Хуки — это удивительные инструменты, которые также заменяют некоторые методы жизненного цикла. Ниже приведен лишь пример того, насколько чище это может быть.
import React, { FC, useState } from 'react'
interface IProps {
username: string
}
const EntryForm: FC<IProps> = ({username}) => {
const [combinedURL, setCombinedURL] = useState('Start of the URL here ')//sets up state for you without extra work
useEffect(() => {
//do something to the state
setCombinedURL(combinedURL username)
}, [])//This dependency array determines when this method fires. Empty means it runs only once.
return(
<div>
This is the combined URL {combinedURL}
<input type='text' onChange={e => {
setCombinedURL(e.target.value); //Or whatever else you want to happen.
}}>
</div>
)
}
Комментарии:
1. Кстати, использовать функции внутри этого тоже легко. Один новичок другому.