Bind Rückruf ReactJS Zustand von DynamoDB DocumentClient

Question

Ich versuche, den Dreh vorbei an den zurückgegebenen Objekte aus AWS‘DynamoDB Document Client-Modul zu bekommen Zustand zu setzen mit reagieren.

Mein Problem, ich kann die Daten aus dem Verfahren (meine bisherigen Versuche zur Verwendung von Callback nicht) ziehen und Überhöhung (scheinbar) setState innerhalb des Verfahrens.

Ich habe eine Menge Dokumentation und kann Status von einem Inline-Objekt bearbeiten (es wird als Objekt mit dem DocClient zurückgegeben), aber dieses Spiel ist nicht nett.

Unten ist mein Grundausgangspunkt, mit einer Rückkehr als Platzhalter, aber ich brauche ein Beispiel für i teh einfach bin.

Ich würde jede Hilfe und/oder Ermahnung hier schätzen. Danke allen.

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

Sie sollten nicht asynchrone Aktionen ausführen, oder alle Aktionen, die der Staat für diese Angelegenheit zu ändern, in render(). Das liegt daran, dass render() immer dann aufgerufen wird, wenn sich der Status ändert, und wenn Sie den Status in render() ändern, endet möglicherweise eine Endlosschleife. Ein besserer Ort wäre componentDidMount().

Außerdem sollten Sie den Status im Rückruf auf docClient.get() setzen, denn nur wenn dieser Aufruf erfolgt, können Sie auf die heruntergeladenen Daten zugreifen.

Versuchen Sie folgendes:

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> 
    ); 
    } 
}