Question

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

问题：

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

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

假设我有以下变量。

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>

反应：兑现承诺后，更新组件数据/道具

1 个答案: