代码之家 › 专栏 › 技术社区 › bp123

使用REST API数据设置变量

meteor reactjs

bp123 · 技术社区 · 8 年前

result.data undefined 虽然 console.log(result.data) 正在返回国家数据。

export default class CountryPage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const countries = HTTP.get('https://restcountries.eu/rest/v2/all', (err, result) => {
      console.log(result.data);
      return result.data;
    });
    console.log('countries', countries);
    return (
      <div>  
        <Input type="select" name="countrySelect" id="countrySelect">
          {countries.map(country => (
            <option>{country.name}</option>
          ))}
        </Input>
      </div>
    );
  }
}

2 回复 | 直到 8 年前

Paul McLoughlin 8 年前

这里,我们使用生命周期方法 componentDidMount

 export default class CountryPage extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
            countries: []
        }
      }
      componentDidMount() {
        HTTP.get('https://restcountries.eu/rest/v2/all', (err, result) => {
          this.setState({countries:result.data})
        });
      }
      render() {
        const {countries} = this.state;
        return (
          <div>  
            <Input type="select" name="countrySelect" id="countrySelect">
              {countries.map(country => (
                <option>{country.name}</option>
              ))}
            </Input>
          </div>
        );
      }
    }

Wesgur 8 年前

HTTP请求是一个异步任务。你必须等待API的响应,所以

export default class CountryPage extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    HTTP.get('https://restcountries.eu/rest/v2/all', (err, result) => {
        const countries = result.data;
        console.log('countries', countries);
        return (
          <div>  
            <Input type="select" name="countrySelect" id="countrySelect">
              {countries.map(country => (
                <option>{country.name}</option>
              ))}
            </Input>
          </div>
        );
    });
  }
}

推荐文章

VikR · React头盔:哈希不被接受?

2 年前

Gravity123 · 使用arrayFilters更新对象数组

3 年前

loomi · 查找项目目录的绝对基本路径

13 年前

l_na_l · 如何使用javascript渲染模板值-Meteor

13 年前

SmashBrando · 使用帐户和数据

13 年前

jthomasbailey · Meteor-如何将动态生成的内容插入到集合中?

13 年前

Aaron Cunnington · 流星:意外的mongo退出代码100

13 年前

dimfisch · 计算文本宽度(以像素为单位)服务器端

13 年前

Alex Okrushko · 升级到0.5.9后不发送Meteor Collection

13 年前

cuttlefish · 如何在Meteor中通过多种方法访问Raphael论文

13 年前