タグ付けされた質問 「reactjs」

（ファイルまたはサーバーから）JSONデータを表示しようとしたときに、reactjsを使用していて、このエラーを回避できないようです。 Uncaught TypeError: this.props.data.map is not a function 私が見た： 「TypeError：this.props.data.map is not a function」というコードをスローするReactコード React.js this.props.data.map（）は関数ではありません これらはどちらも、問題を解決するのに役立ちませんでした。ページが読み込まれた後、this.data.propsが未定義ではないことを確認できます（JSONオブジェクトと同等の値を持っています-で呼び出すことができますwindow.foo）。 ConversationList。mapメソッドがundefined変数ではなくJSONデータで機能していることを確認するにはどうすればよいですか？ var converter = new Showdown.converter(); var Conversation = React.createClass({ render: function() { var rawMarkup = converter.makeHtml(this.props.children.toString()); return ( <div className="conversation panel panel-default"> <div className="panel-heading"> <h3 className="panel-title"> {this.props.id} {this.props.last_message_snippet} {this.props.other_user_id} </h3> </div> <div …

109 javascript  ajax  json  reactjs 

さまざまな子コンポーネントにデータを入力するためのApiWrapperコンポーネントを作成しようとしています。私が読んだすべてから、これはうまくいくはずです：https：//jsfiddle.net/vinniejames/m1mesp6z/1/ class ApiWrapper extends React.Component { constructor(props) { super(props); this.state = { response: { "title": 'nothing fetched yet' } }; } componentDidMount() { this._makeApiCall(this.props.endpoint); } _makeApiCall(endpoint) { fetch(endpoint).then(function(response) { this.setState({ response: response }); }.bind(this)) } render() { return <Child data = { this.state.response } />; } } class Child extends …

109 reactjs 

私は新しいReactHooksを試していますが、毎秒増加するはずのカウンターを備えたClockコンポーネントがあります。ただし、値は1を超えて増加することはありません。 function Clock() { const [time, setTime] = React.useState(0); React.useEffect(() => { const timer = window.setInterval(() => { setTime(time + 1); }, 1000); return () => { window.clearInterval(timer); }; }, []); return ( <div>Seconds: {time}</div> ); } ReactDOM.render(<Clock />, document.querySelector('#app')); <script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script> <div id="app"></div> コードスニペットを実行する結果を非表示スニペットを展開

109 javascript  reactjs  react-hooks 

Reactコンポーネントがありrender、コンポーネントのメソッド内に次のようなものがあります。 render() { return ( <div> <div> // removed for brevity </div> { switch(...) {} } <div> // removed for brevity </div> </div> ); } ここで重要なのは、2つのdiv要素があり、1つは上部に、もう1つは下部に固定されているということです。途中でswitchステートメントが必要で、状態の値に応じて別のコンポーネントをレンダリングしたいと思います。したがって、基本的には、2つのdiv要素を常に修正し、その真ん中で毎回異なるコンポーネントをレンダリングする必要があります。私はこれを使用して、多段階の支払い手順を実装しています）。ただし、現在のコードと同様に、switch予期しないエラーが発生するため、機能しません。私が望むことを達成する方法について何かアイデアはありますか？

109 reactjs 

提案された方法を使用する： これが結果です：ボタンでリンク、 コードのコメント行の間に reactを使用してHTMLタグ内のLink要素をラップする方法があるかどうか疑問に思い'react-router'ましたbutton。 現在Link、アプリのページをナビゲートするコンポーネントがありますが、その機能をHTMLボタンにマップしたいと思います。

109 html  reactjs  button  hyperlink  router 

私はreact-materializeからコンポーネントをインポートしようとしています- import {Navbar, NavItem} from 'react-materialize'; しかし、webpackが私の.tsxものをコンパイルしているとき、それは上記のエラーをスローします- ERROR in ./src/common/navbar.tsx (3,31): error TS7016: Could not find a declaration file for module 'react-materi alize'. 'D:\Private\Works\Typescript\QuickReact\node_modules\react-materialize\l ib\index.js' implicitly has an 'any' type. これに対する解決策。このimportステートメントを解決してwebpackを操作する方法がts-loaderわかりません。 index.js反応-マテリアライズルックスのはこれを気に入っています。しかし、自分のファイルにモジュールをインポートするためにこれを解決する方法.. https://github.com/react-materialize/react-materialize/blob/master/src/index.js

109 reactjs  webpack  webpack-2 

私は考えていましたが、クライアントとサーバー間のルーティングに戸惑っています。Webブラウザーにリクエストを送信する前にサーバー側のレンダリングにReactJSを使用し、SPAとして更新することなくページを切り替えるクライアント側のルーティングとしてreact-routerを使用するとします。 頭に浮かぶのは： ルートはどのように解釈されますか？たとえば、ホームページ（/home）から投稿ページ（/posts）へのリクエスト サーバー側またはクライアント上のルーティングはどこに行きますか？ それがどのように処理されるかはどのようにしてわかりますか？

108 javascript  reactjs  routes  react-router  url-routing 

私は何十ものReactファイルを書きました、決してcomponentDidUpdateメソッドを使用しません。 この方法を使用する必要がある典型的な例はありますか？ 単純なデモではなく、実際の例をいくつか欲しい。 答えてくれてありがとう！

108 reactjs 

ブラウザーでReactのランタイムバージョンを確認する方法はありますか？

108 javascript  reactjs 

私の反応webAppはブラウザーコンソールでこのエラーを出します Refused to load the font 'data:font/woff;base64,d09........' because it` `violates the following Content Security Policy directive: "default-src` `'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. また： Refused to connect to 'ws://localhost:3000/sockjs-node/782/oawzy1fx/websocket' because it violates the following Content Security Policy directive: "default-src 'self'". Note …

108 javascript  reactjs  webpack 

Reactチュートリアルでこれを読みました。これは何を意味するのでしょうか？ 反応は安全です。HTML文字列は生成しないため、XSS保護がデフォルトです。 Reactが安全な場合、XSS攻撃はどのように機能しますか？この安全はどのようにして達成されますか？

108 reactjs  security  xss 

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には出力されません。

108 reactjs  react-props 

私は以下のような文脈で言語設定を持っています class LanguageProvider extends Component { static childContextTypes = { langConfig: PropTypes.object, }; getChildContext() { return { langConfig: 'en' }; } render() { return this.props.children; } } export default LanguageProvider; 私のアプリケーションコードは次のようになります <LanguageProvider> <App> <MyPage /> </App> </LanguageProvider> 私のページには言語を切り替えるコンポーネントがあります <MyPage> <LanguageSwitcher/> </MyPage> LanguageSwitcher このMyPage場合、以下のようにコンテキストを更新して言語を「jp」に変更する必要があります class LanguageSwitcher extends Component { static contextTypes …

108 javascript  reactjs  react-context 

小道具の変更時に状態がリロードされることを期待していますが、これは機能せず、user変数は次のuseState呼び出しで更新されません。何が問題になっていますか？ function Avatar(props) { const [user, setUser] = React.useState({...props.user}); return user.avatar ? (<img src={user.avatar}/>) : (<p>Loading...</p>); } codepen

108 reactjs  react-hooks 

休業。この質問には、より焦点を当てる必要があります。現在、回答を受け付けていません。 この質問を改善してみませんか？質問を更新して、この投稿を編集するだけで1つの問題に焦点を当てます。 2年前休業。 この質問を改善する React / Reduxは初めてです。ReduxアプリでフェッチAPIミドルウェアを使用してAPIを処理しています。（redux-api-middleware）です。これは非同期APIアクションを処理する良い方法だと思います。しかし、私は自分で解決できないいくつかのケースを見つけます。 ホームページ（Lifecycle）が言うように、フェッチAPIライフサイクルは、CALL_APIアクションのディスパッチで始まり、FSAアクションのディスパッチで終わります。 したがって、私の最初のケースは、APIをフェッチするときにプリローダーを表示/非表示にすることです。ミドルウェアは、最初にFSAアクションをディスパッチし、最後にFSAアクションをディスパッチします。両方のアクションは、一部の通常のデータ処理のみを実行するレデューサーによって受信されます。UI操作や操作はありません。多分私は状態で処理ステータスを保存し、ストアの更新時にそれらをレンダリングする必要があります。 しかし、これを行う方法は？ページ全体に反応するコンポーネントのフロー？他のアクションからストアを更新するとどうなりますか？つまり、州というよりイベントのようなものです。 さらに悪いケースとして、redux / reactアプリでネイティブの確認ダイアログまたはアラートダイアログを使用する必要がある場合はどうすればよいですか？それらはどこに置くべきですか、行動または減力剤？ ご多幸を祈る！返信をお願いします。

107 javascript  reactjs  redux