Невозможно использовать this.props или установить this.state в функции вне рендеринга

#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>
   )

}