反応でレンダリングされないプロパティとして渡される変数

debugcn 投稿 Dev

デボンF

反応するのは初めてで、これは誰かにとって簡単な質問になると思いますが、この問題に答える特定の質問を見つけることができません。私はreactチュートリアルを行い、その後、Webページにさらにいくつかの機能ボタンを追加して自分自身をテストすることにしました。まず、Webページは次のようになります。

私がやりたいのは、合計数の横にすべてのカウンターの合計数（配列のサイズなどが異なる場合があります）を表示することです。現在、私は次のようにしています：まず、私のナビゲーションバーコンポーネント：

const NavBar = ({ totalCounters }, { totalCount }) => {
  return (
    <nav className="navbar navbar-light bg-light">
      <a className="navbar-brand" href="www.thisisirellevant.com">
        Navbar{" "}
        <span className="badge badge-pill badge-secondary">
          # of Nonzero Counters: {totalCounters}
        </span>
        <span className="badge badge-pill badge-secondary m-2">
          Total Count: {totalCount}
        </span>
      </a>
    </nav>
  );
};

そして今、私がこれを親でどのようにレンダリングしているか：

const sum = this.sumValues();
    return (
      <React.Fragment>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length} //this is a little different becuase we made it a functional component (it only raises events)
          totalCount={sum}
        />

（フラグメント全体は表示されませんが、フラグメントは最終的に閉じます）そして最後に、Appクラスで作成したsum関数：

sumValues() {
    var sum = 0;
    var counter;
    for (counter in this.state.counters) {
      sum += counter["value"];
    }
    return sum;
  }

合計数が表示されない理由を誰かに教えてもらえますか？すべてを正しく渡し、sum関数から整数を返しているように感じますが、上の画像からわかるように、その場所には何もレンダリングされていません。そのような初心者の質問をお詫び申し上げます。皆さんありがとう！

JózefPodlecki

コンポーネントの明らかな({ totalCounters }, { totalCount })間違いは別として、合計を計算するときにループNavBarを使用することをお勧めしfor ofます。

例

const { Component, useState, useEffect } = React;

const NavBar = ({ totalCounters, totalCount, isComputing }) => {
  return <div>
    <div>Counters: {totalCounters}</div>
    {isComputing ? <div>Computing count...</div> : <div>Count: {totalCount}</div>}
  </div>
}
 
class App extends Component {
  constructor(props) {
    super(props);
    this.sumValues = this.sumValues.bind(this);
    
    this.state = {
      count: -1,
      isComputing: true,
      counters: Array(Math.floor(Math.random() * 10)).fill(0).map((pr, index) => ({value: index}))
    }
    this.mounted = false;
  }
  
  componentDidMount() {
    this.mounted = true;
    setTimeout(() => {
      
      const count = this.sumValues();
      const isComputing = false;
      if(this.mounted) {
        this.setState(state => ({...state, count, isComputing}))
      }
    }, 300);
  }
  
  componentWillUnmount() {
    this.mounted = false;
  }
  
  sumValues() {
    let sum = 0;
    const { counters } = this.state;
    
    for (let { value } of counters) {
      sum += value;
    }
    return sum;
  }

  render() {
    const { counters, count, isComputing } = this.state;
  
    return <div>
       <NavBar
            totalCounters={counters.filter((c) => c.value > 0).length}
            totalCount={count}
            isComputing={isComputing}
          />
    </div>
  }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
  );

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<div id="root"></div>

理想的にはcount、計算を保存できる別の状態を追加します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

反応でレンダリングされないプロパティとして渡される変数

反応でレンダリングされないプロパティとして渡される変数

プロパティが変更されたときに反応して特定のコンポーネントを再レンダリングする方法

オブジェクトのプロパティを変更し、反応性を維持しようとしています。プロパティまたはメソッド「vm」はインスタンスで定義されていませんが、レンダリング中に参照されます

反応ネイティブで整数として渡されない変数

変数に保存されている画像パスがテンプレートで正しくレンダリングされない

渡されたプロパティ「要素」に基づいてSVGをレンダリングします

onFocusとonBlurが反応してレンダリングされない

レンダリングされた予期しない数に反応する

レンダリングされていないときにネイティブが実行するコンポーネントコードに反応する

ifステートメントを使用して.map内でレンダリングされないコンポーネントを反応させる

変数として渡されたreactコンポーネントにプロパティを追加するにはどうすればよいですか？

反応変数がDOMでレンダリングされないのはなぜですか？

反応でレンダリングされない要素

setstateの後にレンダリングされないネイティブデータを反応させる

エスケープされたhtml文字でレンダリング変数を反応させる

最初のログイン後にリダイレクトしないで反応します。ただし、強制的にリダイレクトしてログインアクションを再度実行すると、リダイレクトされます

小道具が変更されたときにコンポーネントを再レンダリングしないで反応する

レンダリングされないネイティブFlatListアイテムに反応する

反応ネイティブでフラットリストを使用してデータがレンダリングされない

配列が変更されていない場合、配列プロパティを持つReact / Redux / PureComponentが再レンダリングされます

コントロールがレンダリングされないのに、なぜそのプロパティが評価されるのですか？

テキストとコンポーネントが開始されていないときにコードレンダリングを反応させる

再レンダリング時にコンテナが削除されないことに反応します

iText7-HTMLをPDFに変換するときにCSS3のtext-overflowプロパティがレンダリングされない

レンダリング後に呼び出される関数はネイティブに反応します

ボタンが反応してレンダリングされないのはなぜですか？

プロパティまたはメソッド「foo」はインスタンスで定義されていませんが、レンダリング中に参照されます。このプロパティがリアクティブであることを確認してください

ネストされたコンポーネントをレンダリングしないで反応する

関数から返されたデータが反応してレンダリングされないのはなぜですか？

ボックスシャドウカラー関数のCSSカスタムプロパティがSafariで正しくレンダリングされない