将回调绑定到 DynamoDB DocumentClient 的 ReactJS 状态

Question

我正在尝试掌握将返回的对象从AWS的DynamoDB文档客户端模块中传递出去的窍门，以使用react设置状态。

我

的问题，我无法将数据从方法中提取出来（我之前使用回调的尝试失败）并且（显然）无法在方法内部设置状态。

我查看了相当数量的文档，并且可以从内联对象操作状态（它作为 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>
    );
  }
}