Question

我试图建立一个黑客新闻克隆作为反应的做法。在这里，我试图仅通过反应来构建它，然后我将使用Redux构建它。这是我的组件结构。

--main
  |--menubar
  |--articles

以下是该项目的codepen。

我在这里有两个问题。

1）。在这里，我通过状态和props.I传递数据。我在componentDidMount组件的menubar方法中调用API，并通过{{1}将其传递给articles组件}} 零件。但是，当它通过main方法中的props接收数据时，它不会呈现列表。要渲染它，我必须单击componentWillReceiveProps（它与获取数据无关，它只是打印日志），它将调用API方法。当通过道具接收数据并设置数据时，如何在News中呈现数据。

2）。在API调用中，我已定义仅获得前20个帖子。但是当我点击this.state.articleList时，我每次都会收到随机播放的（＆lt; 20）帖子数量。这是为什么？由于API调用相同，不应该呈现相同数量的（20）个帖子吗？为什么会有所不同？

这两个问题都是因为异步方法吗？如果是这样我怎么解决？

Answer 1

实际上由于异步，我使用async library编辑了 fetchdata（）并添加了 getItems（）来编辑它。

使用map的优点是它将返回一个结果数组，因此我们不需要维护数组。

var async = require("async");

fetchdata() {
fetch("https://hacker-news.firebaseio.com/v0/topstories.json")
  .then(res => res.json())
  .then(data => {
    this.setState({ storyList: data }, () => {
      this.getItems(this.state.storyList);
    });
  })
  .catch(err => console.log(`Error fetching data : ${err}`));
  }


getItems(storyList) {
    async.mapLimit(storyList, 10,
      function(item, callback) {
        console.log(item);
        fetch(`https://hacker-news.firebaseio.com/v0/item/${item}.json`)
          .then(res => res.json())
          .then(data => {

            //pass the data here
            callback(null, data);
          });
      },
      function(err, dataArray) {
        if (err) {
          console.error(err.message);
        } else {

          //dataArray will contain an array of results from map
          this.props.getData(dataArray);
        }
      }
    );
  }

Answer 2

import numpy as np
import tensorflow as tf

a = np.random.rand(5, 3, 2)
b = np.random.rand(5, 3)

input = tf.constant(a)
weight = tf.constant(b)
C = input * weight.reshape((5, 3, 1)) # Reshape and multiply weights and input
weighted_sum = tf.reduce_sum(C, axis=1) # Sum along dim_a
weighted_sum.shape

Out[9]: TensorShape([Dimension(5), Dimension(2)])

如何进行顺序异步调用并将数据正确传递给兄弟组件？

2 个答案: