小编Cle*_*que的帖子

我试图在componentWillMount方法中对API执行异步调用.实际上我想render在componentWillMount方法之后执行该方法,因为我需要传递props给我的render方法中的组件.

这是我的代码:

class TennisSearchResultsContainer extends React.Component {
  componentWillMount () {
    // TODO: Build markers for the map
    // TODO: Check courtsResults object and database for tennis court
    this.courtsMarkers = this.props.courtsResults.map((court) => {
      return new google.maps.Marker({
        position: new google.maps.LatLng(JSON.parse(court.LOC).coordinates[1], JSON.parse(court.LOC).coordinates[0]),
        title: court.NAME,
        animation: google.maps.Animation.DROP
      });
    });
  }
  render () {
    return <TennisSearchResults criterias={this.props.criterias} courtsMarkers={this.courtsMarkers} />;
  }
}

我不明白为什么我的render方法似乎不等待异步调用完成并将未定义的道具传递给我的子组件...

我对吗？我该怎么做才能解决这个问题？处理这个问题的方法是什么？

我搜索并尝试了很多使用redux-form库的反应形式的select输入类型.

一切正常,所有其他输入类型都可以,但不能选择以下操作:初始化,检索提交的值等.

我尝试使用模型道具"select"并使用我自己的函数来渲染它.当我使用模型的选择版本时,我设法获得组合框字段的选项,但我无法设置值并在提交时检索它.凭借我自己的功能,我甚至无法将选项设置为列表...

这是我的代码:

// FormComponent file
const { handleSubmit } = this.props;
...
<form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
    <Field name='ranking' className='input-row form-group form-control' component={renderSelectField}>
                        {tennisRankings.map(ranking =>
                          <option value={ranking} key={ranking}>{ranking}</option>
                        )}
                      </Field>
...
ProfileForm.propTypes = {
  user: React.PropTypes.object,
  fields: React.PropTypes.shape({
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string,
    ranking: React.PropTypes.string,
    email: React.PropTypes.string,
    telephone: React.PropTypes.string,
    city: React.PropTypes.string
  }),
  errorMessage: React.PropTypes.string,
  confirmationMessage: React.PropTypes.string,
  onSubmitProfileUpdate: React.PropTypes.func.isRequired,
  handleSubmit: propTypes.handleSubmit,
  initialize: propTypes.initialize
};

export default reduxForm({
  form: 'profile',
  validate: validateProfileForm
})(ProfileForm);

我的渲染字段的功能:

// Functions shared
export const renderSelectField = (field) => { …

我有一个具有不同步骤的表单，它们都共享相同的标题结构。

不同步骤中标题的唯一区别是该标题中的措辞随着步骤而变化。

我正在寻找一种方法来做到这一点：

在我的 vue 路由器中：

      path: '/form',
      name: 'Form',
      component: Form,
      children: [
        {
          path: 'step1',
          component: FormStep1,
          propsForParent: {
            title: "myTitle In Header In Form Component"
          },
        },
        {
          path: 'step2',
          component: FormStep2,
          propsForParent: {
            title: "myTitle is different In Header In Form Component"
          },
        }
      ]

因此，当路由是 form/step1 时，我希望我的表单组件接收在我的子配置中设置的标题道具，如上所述等等。

我想避免在我的父组件中管理它，也避免我的孩子将此信息与事件传达给我的父组件或使用 vuex。我正在 vue 路由器中直接搜索一些不错的东西。

任何的想法？

我想在vue（Typescript）中使用axios，但是我的代码遇到了麻烦。这是我的main.ts

import axios from 'axios'
Vue.prototype.$axios = axios
axios.defaults.baseURL = 'http://192.168.1.225:8088'

这是我的Vue代码 屏幕截图

这是我第一次使用Typescript？在我以其他方式在javaScript中使用它之前，我没有任何问题，那么如何在TypeScript中使用它呢？

感谢您的时间和解决方案。

在Vue.js中,您可以使用@路径文件作为src文件夹的快捷方式.这很好,因为你的所有文件都有一个绝对路径.

但是,我无法找到一种方法来配置WebStorm以理解这一点,并允许我在使用它时跟踪并检查文件是否存在.

示例:

import Business from '@/components/Business/Business'

写下我希望WebStorm告诉我文件是否不存在,并允许我直接转到该文件.

我没有找到任何关于它的答案,也没有设法在IDE中找到一种方法.