DynamoDB DocumentClient에서 ReactJS 상태에 대한 콜백을 바인딩합니다.

Question

반환 된 객체를 AWS의 DynamoDB 문서 클라이언트 모듈에서 전달하여 응답 상태로 설정하려고합니다.

내 문제는 메소드에서 데이터를 가져 오지 못했고 콜백을 사용하지 못했습니다. 분명히 메소드 내에서 setState를 사용할 수 없습니다.

문서의 상당량을 볼 수 있으며 인라인 개체 (docClient에서 개체로 반환 됨)에서 상태를 조작 할 수 있지만이 개체는 훌륭하게 재생되지 않습니다.

아래는 기본 출발점이며, 자리 표시 자로 돌아 오는 경우 예가 필요합니다. 간단하기 때문에.

여기에서 도움이나 조언을 부탁드립니다. 모두에게 감사드립니다. render()에서 그 문제에 대한 상태를 수정

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()에서 상태를 변경하면 무한 루프가 될 수 있습니다. 더 나은 곳은 componentDidMount()입니다.

또한 콜백 상태가 docClient.get()으로 설정되어야합니다. 콜백 상태가 호출 될 때 다운로드 한 데이터에 액세스 할 수 있기 때문에 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> 
    ); 
    } 
}