ReactJS状態へのコールバックをDynamoDB DocumentClientからバインドします

Question

返されたオブジェクトをAWSのDynamoDBドキュメントクライアントモジュールから渡して、反応を伴う状態を設定しようとしています。

私の問題では、メソッドからデータを取り出すことができません（コールバックを使用した私の以前の試みは失敗しました）。メソッドの内部では（明らかに）setStateを実行できません。

ドキュメントの量がかなり多く、インラインオブジェクト（docClientでオブジェクトとして返されます）から状態を操作できますが、これはうまく動作しません。

以下は私の基本的な出発点です。プレースホルダーとしてのリターンがありますが、私は例が必要です。私は単純ですから。

ここでは、何か助けや助言をいただきありがとうございます。皆さんありがとう。

export default class AwsReadFunction extends React.Component { 

constructor(){ 
    super(); 
    this.state={ 
    elss: "chicken" 
    }; 
} 

render(){ 
    var docClient = new AWS.DynamoDB.DocumentClient() 
    var table = "Movies"; 
    var year = 1944; 
    var title = "Lifeboat"; 
    var params = { 
    TableName: table, 
    Key:{ 
     "year": year, 
     "title": title 
    } 
    }; 

    var goog = docClient.get(params, 
    function(err, data){ 
     // I think this is where I need help with scope and callback 
     return data.Item.title; 
    } 
); 

    setTimeout(() => { 
    this.setState({ 
    elss: goog 
    }); 
    }, 2000) 

    return (
    <div> 
    {this.state.elss} 
    <List /> 
    </div> 
); 
} 
}; 

Answer 1

あなたは非同期アクション、またはrender()で、そのことについては状態を変更する任意のアクションを実行するべきではありません。これは、状態が変わるたびにrender()が呼び出され、render()で状態を変更すると、無限ループに終わる可能性があるからです。より良い場所はcomponentDidMount()です。

また、コールバックの状態をdocClient.get()に設定する必要があります。コールされたときにのみ、ダウンロードしたデータにアクセスできるからです。

はこれを試してみてください：

export default class AwsReadFunction extends React.Component { 

    constructor(){ 
    super(); 
    this.state={ elss: "chicken" }; 
    } 

    componentDidMount() { 
    var docClient = new AWS.DynamoDB.DocumentClient() 
    var table = "Movies"; 
    var year = 1944; 
    var title = "Lifeboat"; 
    var params = { 
     TableName: table, 
     Key:{ 
     "year": year, 
     "title": title 
     } 
    }; 

    var goog = docClient.get(params, (err, data) => { 
     // TODO: handle `err` 
     this.setState({ elss : data.Item.title }); 
    }); 
    } 

    render(){ 
    return (
     <div> 
     {this.state.elss} 
     <List /> 
     </div> 
    ); 
    } 
}