8

サーバー側でレンダリングされ、ユーザーの進行中の作業が事前に入力されたフォームを含む React アプリがあります。問題は、アプリが読み込まれる前にユーザーがフォームの値を編集した場合、アプリは変更を認識しないことです。ユーザーが保存すると、サーバーによってレンダリングされた変更されていないデータが再保存され、ユーザーの新しいデータは削除されますが、フォームには引き続き表示されます。要するに、React と、最初の読み込み時に置き換えられるマークアップの入力値との間に切断があるようです。

すべての入力に ref を配置し、その値を componentDidMount のアプリケーション状態にコピーできると思いますが、もっと良い方法が必要です。他の誰かがこの問題を解決しましたか?

アップデート

これを解決する最善の方法は、チェックサムを作成するときに React に入力値を考慮させることだと私は考えています。GH の問題: https://github.com/facebook/react/issues/4293

4

2 に答える 2

3

すべての入力に ref を配置し、その値を componentDidMount のアプリケーション状態にコピーできると思いますが、もっと良い方法が必要です。他の誰かがこの問題を解決しましたか?

ブラウザーがフィールドを自動入力したり、更新時に以前の値を記憶したりすることも、事実上同じ問題を引き起こす可能性があります。つまり、アプリのデータ ビューがユーザーのものとは異なるということです。

過去の私の強引な解決策は、入力から完全なフォーム状態を抽出し、onSubmit送信を続行できるようにする前に検証を再実行することでした。

提案どおりに使用componentDidMountすると、ユーザーが無効なデータを入力し、警告が表示される前に送信を試みることを回避できるため、より洗練されたソリューションのように聞こえます。refただし、すべての入力にa を追加する必要はありません。に 1 つ追加し、<form>その.elementsコレクションを使用してすべてのデータをプルするだけです。

推奨される解決策:

  1. ではcomponentDidMount()、フォームからフォームのデータを取得します(この目的のために、フォーム ライブラリからget-form-data.elementsを抽出しました)。
  2. アプリの状態と照らし合わせて、各フィールドの現在の値を確認します。
  3. フィールドの現在の値が異なる場合は、イベントを介して到着する新しいユーザー入力と同じように扱います。状態を更新し、関連する検証ルーチンを再実行します。

それcomponentDidMount()以降は、アプリとユーザーは常に同じページに (文字通り) 表示されます。

于 2015-07-05T20:49:57.473 に答える
0

私があなたを正しく理解していれば、これが起こっていることです: https://jsfiddle.net/9bnpL8db/1/

var Form = React.createClass({
    render: function () {
        return <div>
            <input type="text" defaultValue={this.props.defaultValue}/>
        </div>;
    }
});

// Initial form render without server-side data
React.render(<Form/>, $('#container')[0]);

setTimeout(function () {
    // Simulate server-side render
    $('#container').html(
        // overwrites input
        React.renderToString(<Form defaultValue="server1"/>)
    );
}, 5000);

更新を行うためにサーバー側のレンダリングを使用しないでください。むしろ、サーバー側のレンダリングを使用して初期ページを作成し、ユーザーが変更を加える前に入力を移入する必要があります。あなたの問題を解決するには、いくつかのオプションがあると思います：

  1. サーバー側のレンダリングを使用して最初のページをレンダリングし、保存されたデータを入力に事前入力します。このオプションを使用すると、保存されたデータのないページがユーザーに表示されることはありません。これにより、ユーザーが入力を開始すると、その入力がサーバーによって上書きされるという問題が解消されます。
  2. クライアント側のレンダリングを使用してページをレンダリングし、GET 要求を使用して事前入力されたデータを取得し、ユーザーがまだ入力を入力していない場合は入力を更新します。
于 2015-07-05T06:14:40.333 に答える