Question

我认为这个标题并不能很好地解释这个问题，所以我很抱歉。这是快速摘要。我有一个集合，其中包含我需要提取的密钥并附加到axios.get请求的URL。但是，我需要映射集合并为每个键发出get请求并返回每个键的结果。

如果这没有意义，也许我可怕的代码会：

return this.props.wallets.map(wallet => {

  const apiLink = "https://api.smartbit.com.au/v1/blockchain/address/";
  const key = wallet.publicKey;
  const url = apiLink + key;
  this.getData = () => {
    axios
    .get(
      url
    )
    .then(res => {
      this.setState({ coins: res.data.address.total.received_int });
    })
    .catch(error => {
      console.log(error);
    });
  };

  let totalBitcoin = this.state.coins/100000000;

    return (
      <tr key={wallet._id}>
        <td>
          <Link className="wallet-link" to={link}>
            {wallet.title}
            <span className="glyphicon glyphicon-stats" />
          </Link>
        </td>
        <td>
          {totalBitcoin}
        </td>
        <td>
          <Link to="/wallets/delete">
            <span className="glyphicon glyphicon-trash" />
          </Link>
        </td>
      </tr>
  );
});

getData是一个函数，它确保我只是以预定的间隔发出get请求。

所以，这几乎可行。我得到了数据，将totalBitcoin变量表中的所有实例设置为相同的结果。然后它会在函数映射到我的集合时不断更新该值。

我不知道如何在没有映射我的集合的情况下制作这个axios请求，以获取我正在调用的端点所需的变量。我不知道如何正确设置我的映射变量。任何帮助都会非常感激。

Answer 1

您在this.setState的每次迭代中调用this.props.wallets.map方法，this.state.coins值在每个axios请求解析时不断重置为新值。这似乎毫无用处。此外，变量totalBitcoin将始终等于最后解决的钱包的axios响应res.data.address.total.received_int。

您可以在componentDidMount()中执行API调用，然后将每个钱包响应附加到this.wallets数组，如this.setState({wallets: [...this.state.wallets, wallet]})。现在在渲染功能中，您可以执行return.this.state.wallet.map(wallet => ...);

实施例

  class WalletContainer extends React.Component {
    componentDidMount(){
      this.props.wallets.map(wallet => {
        const apiLink ="https://api.smartbit.com.au/v1/blockchain/address/";
        const key = wallet.publicKey;
        const url = apiLink + key;
        this.getData = () => {
          axios
          .get(
            url
          )
          .then(res => {
            const newWallet = { 
                id: wallet._id,
                title: wallet.title,
                coins: res.data.address.total.received_int
            }
            this.setState({ wallets:
              [...this.state.wallets, newWallet]
             });
          })
          .catch(error => {
            console.log(error);
          });
        };
      })
    }
    render(){
      return this.state.wallets.map(wallet => {
        const totalBitcoin = wallet/100000000; // should be const because it never changes
        return (
          <tr key={wallet.id}>
            <td>
              <Link className="wallet-link" to={link}>
                {wallet.title}
                <span className="glyphicon glyphicon-stats" />
              </Link>
            </td>
            <td>
              {totalBitcoin}
            </td>
            <td>
              <Link to="/wallets/delete">
                <span className="glyphicon glyphicon-trash" />
              </Link>
            </td>
          </tr>
        );
      })
    }

  }

如果道具可以更改，您应该在willRecieveProps()中编写其他逻辑，您将在其中执行axios请求并将新钱包附加到this.state.wallets或删除钱包新道具中没有。

Axios请求使用包含映射集合中的变量的URL

1 个答案: