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

Question

我正在尝试将返回的对象从 AWS 的 DynamoDB 文档客户端模块中传递出去，以便通过反应设置状态。

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

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