Реагируйте: Обновите данные компонента / реквизиты после решения обещания

Question

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

Проблема:

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

Проблема в том, что, если я правильно понимаю, ям, передавая старые значения при создании компонента, а не фактические / обновленные значения, которые я хочу отобразить ...

Допустим, у меня есть следующие переменные.

const user_data = {
   pic_url: 'null',
   followers: 'Loading...',
   followings: 'Loading...',
   nTweets: 'Loading...',
};

Эти переменныебудут менять значение всякий раз, когда пользователь нажимает кнопку.

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

const SomeComponent = props => {
  const [resolved, setResolved] = useState({ display: false });

  const displayValidation = props => {
    setResolved({ ...resolved, display: !resolved.display });
  };

function getData(username) {
        const url = 'https://www.twitter.com/' + username;
        getHTML(url)
          .then(res => {
            getUserData(res).then(res => {
              user_data.followers = res.followers;
              user_data.followings = res.followings;
              user_data.nTweets = res.nTweets;
              user_data.pic_url = res.pic_url;
              console.log('Updated data:', user_data);
              displayValidation();
            });
          })
          .catch(function(error) {
            console.error('Username was not found.');
          });
      }

      const handleSubmit = event => {
        event.preventDefault();
        console.log('Resolving data...');
        getData(user.username);
      };

      return (
        <React.Fragment>
          <Navbar />
          <div className="container lg-padding">
            <div className="row" id="getTracker">
              <div className="col-sm-12 center">
                <div className="card text-center hoverable">
                  <div className="card-body">
                    <div className="input-field">
                      <i className="material-icons prefix">account_circle</i>
                      <input
                        id="username"
                        type="text"
                        className="validate"
                        value={user.username}
                        onChange={handleChange}
                      />
                      <label htmlFor="username">Enter a username to track</label>
                    </div>
                    <input
                      type="button"
                      onClick={handleSubmit}
                      value="Track"
                      className="btn-large blue darken-4 waves-effect waves-light"
                    />
                  </div>
                </div>
              </div>
            </div>
            <div className="row">
              <div className="col-sm-12">
                **{resolved.display && <DisplayData type={1} data={user_data} />}**
              </div>
            </div>
          </div>
          <Footer />
        </React.Fragment>
      );
    };

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

Это компонент, который я создаю

import React from 'react';

const DisplayData = props => {
  const user = props.data;
  console.log('Display', user);
  switch (props.type) {
    case 1: //Twitter
      return (
        <React.Fragment>
          <div className="row lg-padding">
            <div className="col-sm-12 lg-padding center">
              <img
                src={user.pic_url}
                alt="profile_picture"
                style={{ width: 50 + '%' }}
              />
            </div>
            <h2>{user.username}</h2>
          </div>
          <div className="row lg-padding">
            <div className="col-sm-4">
              <h4>Tweets: {user.nTweets}</h4>
            </div>
            <div className="col-sm-4">
              <h4>Followers: {user.followers}</h4>
            </div>
            <div className="col-sm-4">
              <h4>Followings: {user.followings}</h4>
            </div>
          </div>
        </React.Fragment>
      );

    case 2: //Instagram
      return <React.Fragment />;

    default:
      return (
        <React.Fragment>
          <div className="row lg-padding">
            <div className="col-sm-12 lg-padding center">
              <img
                src={user.pic_url}
                alt="profile_picture"
                style={{ width: 50 + '%' }}
              />
              <h2>Instagram_User</h2>
              <h4>Posts: ND</h4>
              <h4>Followers: ND</h4>
              <h4>Followings: ND</h4>
            </div>
          </div>
        </React.Fragment>
      );
  }
};

export default DisplayData;

Как обновить данные вкомпонент или визуализировать компонент при обновлении данных?

Answer 1

Может быть, ваш user_data может быть объектом состояния.

// Somecomponent ...
const [user_data, setUser_data] = useState({
   pic_url: 'null', 
   followers: 'Loading...', 
   followings: 'Loading...',  
   nTweets: 'Loading...'
})
/* Rest of stuff */

const handleSubmit = async event => {
/*...*/
    const userData = await getData(user.username)
    setUser_data(userData)
}

// Then display the stated-stored user_data
<div className="col-sm-12">
      **{resolved.display && <DisplayData type={1} data={user_data} />}**
</div>