javascript - react : Update component data/props after promise resolved

Question

我对 React 有点陌生，我在理解我在其他语言中使用的某些方法的变通方法时遇到了一些问题。

问题:

我希望实现的是，每当用户单击一个按钮时，该应用程序将呈现一个显示一些变量值的新部分。我所做的是，当用户单击一个按钮时，状态发生变化，并让新组件呈现，然后我通过它的 props 传递数据。

问题是，如果我理解正确的话，我在创建组件时传递的是旧值，而不是我想要呈现的实际/更新值...

假设我有以下变量。

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>