タグ付けされた質問 「react-props」


1
JSXでforeachに反応する
REACTで出力したいオブジェクトがあります question = { text: "Is this a good question?", answers: [ "Yes", "No", "I don't know" ] } そして私の反応コンポーネント(カットダウン)は別のコンポーネントです class QuestionSet extends Component { render(){ <div className="container"> <h1>{this.props.question.text}</h1> {this.props.question.answers.forEach(answer => { console.log("Entered"); //This does ifre <Answer answer={answer} /> //THIS DOES NOT WORK })} } export default QuestionSet; 上記の抜粋からわかるように、小道具の配列Answersを使用してコンポーネントAnswerの配列を挿入しようとしています。これは繰り返し実行されますが、HTMLには出力されません。


1
明示的には使用されていませんが、 `componentWillMount`警告
私のコードでは、を明示的に使用していませんがcomponentWillMount、実行中にいくつかの警告が表示されますwebpack。 react-dom.development.js:12386警告:componentWillMountは名前が変更されたため、使用をお勧めしません。詳細については、https:/fb.me/react-unsafe-component-lifecyclesを参照してください。 副作用のあるコードをcomponentDidMountに移動し、コンストラクターで初期状態を設定します。 非厳密モードでこの警告を抑制するには、componentWillMountの名前をUNSAFE_componentWillMountに変更します。React 17.xでは、UNSAFE_名のみが機能します。廃止されたすべてのライフサイクルの名前を新しい名前に変更するにnpx react-codemod rename-unsafe-lifecyclesは、プロジェクトのソースフォルダーで実行できます。 次のコンポーネントを更新してください:foo、bar 私は提案されたを実行しましたnpx react-codemod rename-unsafe-lifecyclesが、警告は消えませんでしたが、その表現を react-dom.development.js:12386警告:componentWillMountの名前が変更されたため、使用をお勧めしません。[...] ここでは、fooとbar私たちのチームが書いた両方のカスタムコンポーネント、および外部ライブラリのいくつかのコンポーネントがあります。Visual Studioソリューションを完全に検索しcomponentWillMountても結果は得られません。誰かが私に何が間違っていたのか説明してくれませんか? 別の質問でコメントを読んだ で明示的な場所はありませんがcomponentWillMount、コンストラクターの後にコード行があります[...]コンストラクターstate={ tabindex:0 }に「移動」するにはどうすればよいですか? 答えは書くこと constructor(props) {super(props); this.state = { tabindex:0 }}でした。誰かがここで何が起こっていたか説明できますか?コードではどのようなパターンを探す必要がありますか? さらなる詳細 printWarning @ react-dom.development.js:12386 lowPriorityWarningWithoutStack @ react-dom.development.js:12407 ./node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:12577 flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:25641 commitRootImpl @ react-dom.development.js:24871 unstable_runWithPriority @ scheduler.development.js:815 runWithPriority$2 @ react-dom.development.js:12188 commitRoot @ …

4
反応でデータレンダリングを適切にタイミング調整する方法は?
Open Dataからデータをプルして、クイックヒートマップをまとめようとしています。その過程で、いくつかの統計を追加したいと思います。データがあり、マップをレンダリングできるという点で、ほぼすべてがうまくいきますが、データが入るまでに時間がかかるため、データを取得した後の計算の処理方法がわかりません。どのように設定すれば、まだデータを受信して​​いない場合でも、状態変数に対して関数を実行できますか?現在、StatCardに小道具として渡される数値としてnullを取得しています。 以下は私の試みです: App.js import React, { Component } from 'react'; import Leaf from './Leaf'; import Dates from './Dates'; import StatCard from './StatCard'; import classes from './app.module.css'; class App extends Component { constructor(props) { super(props); this.state = { data:[], cleanData:[], dateInput: '2019-10-01', loading: false, totalInspections: null, calculate: false }; } …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.