Reactjs 如何解决“问题”；类型错误：无法读取属性'；地图'；未定义的？

我试图执行fetch调用以返回数组，但是，当我尝试使用map函数迭代数组时，编译器给出了一个错误，表示无法读取未定义的属性映射，我被卡住了，我也对类似问题进行了一些研究，但没有用。我在这里是新手，因此我不确定是哪个部分导致了错误。我意识到它来自我的setState函数调用

这是我的App.js代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 constructor()  {
     super();
     this.state={
        currencies: [],
        };



        }


handleChange =(event) => {

   let initialData = [];
        const url = `http://data.fixer.io/api/latest?access_key=ea263e28e82bbd478f20f7e2ef2b309f&symbols=${event.target.value}&format=1`

console.log("the url is: " + url)
 fetch(url).
  then(data =>{ return data.json();})
  .then(findData => {
   initialData = findData.rates
   console.log(initialData)
   this.setState({

        currencies: initialData.rates,

        });
});

}

  render() {
    const{currencies} = this.state; 
    return (
      <div className="App">
    { this.state.currencies.map((current) => <div> {current.rates}</div>)}  


        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
     <h1 className="App-title"> Welcome to DKK website </h1>

        <div class="dropdown">
          <select id="select1" name ="currency" value={this.state.selectValue} onChange={this.handleChange}>
                <option value="EUR">-- Selecting: NILL --</option>
                <option value="CAD">-- Selecting: CAD --</option>
                <option value="SGD">-- Selecting: SGD --</option>
                <option value="AFN">-- Selecting: AFN --</option>
        </select>


        </div>


<button className="pressMe" > Set Button </button>
<br/>
<br/>


     <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

您的API调用返回a，这意味着没有要立即映射的数组。用于等待API调用完成。一旦数据从API返回，您就可以将其保存到state

此代码示例呈现结果。当货币选择更改时，将进行API调用。Async/Await处理承诺并将结果保存到state。React通过在状态更改时立即呈现结果来“React”

API为每种货币返回不同的

rates

对象。因为这些结果是不可预测的，所以用于访问未知响应对象的名称和值。看

您可以使用解构来访问

this.state.currences

，因此您可以在组件的其余部分中将其称为

currences

。最后，由于已将

handleChange

事件附加到

select

标记，因此不需要该按钮

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      currencies: []
    };
  }

  handleChange = event => {
    this.getData(event.target.value);
  };

  async getData(target) {
    const url = `http://data.fixer.io/api/latest?access_key=ea263e28e82bbd478f20f7e2ef2b309f&symbols=${target}&format=1`;

    console.log("the url is: " + url);
    let data = await fetch(url).then(data => {
      return data.json();
    });
    this.setState({ currencies: data });
  }

  render() {
    const { currencies } = this.state;
    console.log(this.state);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <h1 className="App-title"> Welcome to DKK website </h1>

          <div class="dropdown">
            <select
              id="select1"
              name="currency"
              value={this.state.selectValue}
              onChange={this.handleChange}
            >
              <option value="EUR">-- Selecting: NILL --</option>
              <option value="CAD">-- Selecting: CAD --</option>
              <option value="SGD">-- Selecting: SGD --</option>
              <option value="AFN">-- Selecting: AFN --</option>
            </select>
          </div>

          {/* <button className="pressMe"> Set Button </button> */}
          <br />

          <ul>
            <li>Base: {currencies.base}</li>
            <li>Date: {currencies.date}</li>
            <li>Timestamp: {currencies.timestamp}</li>
            {/* Sometimes currencies.rates is undefined.
            Use conditional rendering to prevent errors when there is no value */}
            {currencies.rates && (
              <li>
                Rate for {Object.keys(currencies.rates)}:{" "}
                {Object.values(currencies.rates)}
              </li>
            )}
          </ul>

          {/*
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
           */}
        </header>
      </div>
    );
  }
}

export default App;

---

您的API调用返回promise base json数据，这意味着没有要立即映射的数组使用

Object.keys

form提取array.map函数的对象键。检查blow代码，以及此代码中修复的一些问题

import React, { Component } from "react";

class App extends Component {
  state = {
    loader: false,
    currencies: []
  };

  handleChange = event => {
    const val = event.target.value;
    this.setState({
      selectValue: val
    });
  };

  fetchData = () => {
    this.setState({
      loader: true
    });
    let initialData = [];
    const url = `http://data.fixer.io/api/latest?access_key=ea263e28e82bbd478f20f7e2ef2b309f&symbols=${
      this.state.selectValue
    }&format=1`;

    console.log("the url is: " + url);
    fetch(url)
      .then(data => {
        return data.json();
      })
      .then(findData => {
        initialData = findData.rates;
        this.setState({
          currencies: initialData,
          loader: false
        });
      })
      .catch(err => console.log(err));
  };

  render() {
    const { currencies, loader } = this.state;
    let list = null;
    if (loader) {
      list = "loading...";
    } else if (!loader && currencies) {
      list = Object.keys(currencies).map(current => (
        <div key={current}>
          {current}: {currencies[current]}
        </div>
      ));
    }
    return (
      <div className="App">
        <header className="App-header">
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <h1 className="App-title"> Welcome to DKK website </h1>
          {list}
          <div className="dropdown">
            <select
              id="select1"
              name="currency"
              value={this.state.selectValue}
              onChange={this.handleChange}
            >
              <option value="EUR">-- Selecting: NILL --</option>
              <option value="CAD">-- Selecting: CAD --</option>
              <option value="SGD">-- Selecting: SGD --</option>
              <option value="AFN">-- Selecting: AFN --</option>
            </select>
          </div>

          <button className="pressMe" onClick={this.fetchData}>
            Set Button
          </button>
          <br />
          <br />

          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

---

你能

console.log（this.state.currencies）

？它很可能不是数组。是的，它输出[索引，值]太棒了！它起作用了！但是，单击按钮到标签时如何显示当前的.rates？还有一个问题：Asyn做什么？显示数据所需做的就是1）将检索到的数据保存到state，2）映射到this.state.currences，呈现一些ui。如果你想让我发布一个示例，我很乐意。是的，请你发布一个示例供我参考，因为这是我在react上的第一个应用程序！我太激动了！！此行{this.state.currences.map（current=>（{current.rates}））}是否允许我显示current.rates？因为它不显示HI您能在按钮点击上显示地图数据而不是当前的实现吗？非常感谢您的时间和支持patience@XingChen请检查最新代码，按下按钮获取数据。