小编jav*_*ing的帖子

我正在使用react-select，并且我不想对应该显示的选项进行硬编码，但是选项是我从api获取的数据。我真的找不到任何东西，而且由于没有显示任何内容，所以我尝试执行的操作不起作用。有谁知道？谢谢！！！

api.js：

export function availableCities() {
   return axios.get('/cities').then(function (response) {
      return response.data;
   })
}

零件：

import Select from 'react-select';
import {availableCities} from '../utils/api.js';

class App extends React.Component {
    constructor(props) {
    super(props);
    this.state = {
        selectedOption: '',
        clearable: true,
        cities: [],
     } 
   }
   componentDidMount() {
    availableCities()
        .then(res => {
            this.setState({
                cities: res.Cities.name
            })
            console.log("hello", this.state.cities)
        })
   }

   handleChange(selectedOption) {
    this.setState({selectedOption});
   }
 render(){
    let options = this.state.cities.map(function (city) {
            return city.name;
    })
 return (
      <div>
           <Select
                name="form-field-name"
                value={this.state.value}
                onChange={this.handleChange}
                clearable={this.state.clearable}
                searchable={this.state.searchable}
                options={options} …

  var p1 = new Promise(function(resolve, reject) {  
    setTimeout(() => resolve("first"), 5000);
  });
  var p2 = new Promise(function(resolve, reject) {  
    setTimeout(() => resolve("second"), 2000);
  });
  var p3 = new Promise(function(resolve, reject) {  
    setTimeout(() => resolve("third"), 1000);
  });

  console.log("last to print");

p1.then(()=>p2).then(()=>p3).then(()=> console.log("last to be printed"))

当我阅读有关承诺时，我知道当我使用 async /await 时，我可以同步打印承诺（在这种情况下是打印：第一个、第二个、第三个、最后一个打印）。现在我也读到同样的事情可以使用 .then 链接来实现，而 async/await 并不是什么“特别”的东西。然而，当我尝试链接我的承诺时，除了“最后打印”的 console.log 之外，什么也没有发生。任何见解都会很棒！谢谢！！

编辑质疑：

  var p1 = new Promise(function (resolve, reject) {
    setTimeout(() => console.log("first"), 5000);
    resolve("first resolved")
  });
  var p2 = new Promise(function (resolve, reject) {
    setTimeout(() => …

如何将我从get请求中接收到的数据传递给组件？我尝试过的任何方法都行不通，但是我的想法是如下代码所示。

    export function data() {
        axios.get('www.example.de')
            .then(function(res) {
                return res.data
            })
            .then(function(data) {
                this.setState({
                    list: data
                })
            })
    }

    import {data} from './api.js';

    class Test extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: ""
            };
        }

        componentWillMount() {
            data();
        }
        render() {
            return <p > this.state.list < /p>
        }
    }

我正在使用反应门户，并希望当用户单击模式之外时模式可以关闭。我正在我的父级中创建一个引用，但无法真正将其分配给模式本身，因为反应门户不是实际的 DOM 节点（据我所知）。我也不能将 this.props.children 包裹在 div 内并在我的 Modal 组件内为其分配一个 ref ，因为这样我就无法在我的 Parent 组件内访问和使用它。我能做些什么？谢谢！

我的模式：

import React from 'react';
import { createPortal } from 'react-dom';
const modalRoot = document.getElementById( 'modal' );
class Modal extends React.Component {

    constructor( props ) {
        super( props );
        this.element = document.createElement( 'div' );
    }
    componentDidMount() {
        modalRoot.appendChild( this.element );
    }
    componentWillUnmount() {
        modalRoot.removeChild( this.element );
    }
    render() {
        return createPortal(this.props.children, document.querySelector('#modal'));
    }
}

父组件渲染模态：

class Parent extends React.Component {
    constructor (props) {
        super(props);
        this.state = { …

抱歉，如果它非常基础，但是：在迭代中渲染多个按钮（0-9）时-btw map和for loop有什么区别？为什么map可以正常工作，所以for循环仅呈现第一个元素（0）？为什么我必须首先将按钮按入数组，然后将其返回（如其他示例所示）？我可以使用常规的for循环和渲染按钮，而不必将其推入Arary吗？谢谢！

 import React from 'react';

    const Keys = () => {        
       const renderKeys = () => {
         //works fine
          var arr = [1,2,3,4,5,6,7,8,9]
          return arr.map((val) => {
              return <button>{val}</button>
            })                 
        };

        const renderKeys = () => {       
              //does not work    
              for (var i=0; i<10; i++) {
               return <button>{i}</button>
            }
        };

        return (
            <div>
                {renderKeys()}
            </div>
        )
    };

我收到带有对象的数据/数组.每个对象都有国家 - 城市和商店(在那个城市).

例如:

1. 美国 - 洛杉矶 - shop1
2. 意大利 - 米兰 - shop2

3. 意大利 - 罗马 - shopXY

   var data = [
     {country: "Italy", city: "Milan", shop: "shop123"},
     {country: "Italy", city: "Rome", shop: "shop2"},
     {country: "USA", city: "Los Angeles", shop: "shopXY"}
   ]
   

   Run Code Online (Sandbox Code Playgroud)

我有3列,我想只展示一次意大利,然后当我点击它时,我展示米兰和罗马,然后根据我是否点击罗马或米兰相应的商店.

以下是好的做法:

1. 获取所有数据,然后创建一个新的对象数组,所以我没有重复的国家,城市等.
2. 使用过滤方法 - 但是如何过滤它,如何检查重复项而不将它们存储在新数组中？
3. 还要别的吗？

我试图研究,但真的找不到任何东西,即使有人只是有一些提示,这将是伟大的,因为我完全失去了.谢谢!!!!

PS.我不想使用任何过滤器库,因为我自己尝试这样做.