передача состояния по ссылке

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я довольно новичок в react и хотел бы передать аргумент через ссылку. Я знаю, что могу сделать это, используя состояние, и я так и сделал.

 <td>
   <Link to={{pathname:"user/" id, state:{user_url:item.url} }} >{item.name}</Link>
</td>
  

Это перенаправит на мой компонент user_detail,

 export default class User_Details extends React.Component {

    constructor(props){
        super(props);
        this.state = {
            error : null,
            isloading: true,
            user_detail : null,
            user_url : null

        };
        if (this.props.location.state){
            this.state.user_url =this.props.location.state.user_url
        }
    }
  

Пользователь может получить доступ к этому компоненту user_detail по ссылке перенаправления или просто по URL-адресу, если он попадает туда по ссылке перенаправления, тогда мне не нужно получать user_url из, потому что он сохраняется в состоянии. Однако, если пользователь использует ссылку, у которой нет состояния, мне сначала нужно получить ссылку.

Это работает, однако я продолжаю получать предупреждение об ошибке, если я использую перенаправляющую ссылку:

index.js:1446 Предупреждение: не удается выполнить обновление состояния реакции для размонтированного компонента. Это не операция, но это указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount. у пользователя (создается контекстом.Потребитель)

Как бы я мог решить эту проблему?

Ответ №1:

Вы не можете управлять состоянием таким образом, я бы посоветовал вам использовать setState в componentDidMount таком

     componentDidMount() {
      if (this.props.location.state){
               this.setState({
                 user_url: this.props.location.state.user_url
               });
      }
   }
  

Комментарии:

1. спасибо за отзыв, я не знал о функциях componentDidMount и update в react, я сделал это в функции рендеринга, которая часто неверна и продолжает рендеринг.

Ответ №2:

как сказал пользователь Rishabh Rawat, я должен был использовать функцию componentDidMount , здесь я выполнил асинхронный вызов, но вместо установки состояния с помощью функции setstate, если был передан аргумент user_link, я сделал это.state.user_link = this.prop.location.state.user_link . Не setState, потому что это иногда задерживается, что вызывает некоторые сбои.

Комментарии:

1. Вы никогда не должны изменять состояние напрямую, как это, setState — это асинхронная функция, если есть некоторые сбои, возможно, вам следует предоставить некоторые проверки для вашего приложения, которые вызывают сбои