dmitriy's questions

后端发送时间：例如12:24:16（电脑上的时间可能不同，所以时间来自服务器）。当你点击保存按钮时，需要提交表单并在提交表单时注明当前时间，如果我们收到的是12:24:16，我们在第一次收到后5分钟填写了表单，那么我必须发送12:29:16。如何使用 moment.js 或 javascript 来实现？

当输入值 12.4567 并知道例如我们有 3 个精度 -> 截断数字 12.456 时，怎么可能？我的代码的问题是，如果您将值 12.4567 复制到输入中，那么它会完全跳过这个数字并且不会将其切断，但是如果您输入它，那么一切正常。

const precision = 3;
const numbersAfterDecimal = value.split('.')[1];

if (numbersAfterDecimal && numbersAfterDecimal.length > precision) {
    const amount = value.slice(0, -1);
}

有一个名称为语言列表的对象数组和一个从这个列表中选择语言的数组 selectedLanguagesId

const list = [
  {
    id: 2,
    name: 'Dutch'
  },
  {
    id: 3:
    name: 'English'
  },
  {
    id: 1:
    name: 'Italian'
  },
  ...
];

let selectedLanguagesId = [3, 2, ...];
const defaultLanguageId = 3;

需要默认语言总是在前面，其余按名称排序。我的脚本的问题是它不能正常工作——它没有把默认语言放在前面。我将不胜感激

getSelectedLanguages() {
  return this.selectedLanguagesId
    .map((id) => this.list.find((lang) => lang.id == id))
    .sort((a, b) => {
      if (a.id == this.defaultLanguageId || b.id == this.defaultLanguageId) return 0;
      if (a.name > b.name) return 1;
      if (a.name < b.name) return -1;

      return 0;
    });
},

我有一个 FormBox.js 组件

import PropTypes from 'prop-types';

const FormBox = (props) => {
    return <form className={`shadow p-3 ${props.className}`}>{props.children}</form>;
};

FormBox.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
};

export default FormBox;

在 App.js 我有一个表单提交，但 event.preventDefault() 不起作用。我了解这是因为此表单是我的组件。如何防止表单提交？

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            posts: [],
            post: {
                title: '',
                body: '',
            },
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    async handleSubmit(event) {
        event.preventDefault();

        const response = await postApi.addPost(this.state.post);
        console.log(response);
    }

    render() {
        return (
            <div className="container">
                <FormBox onSubmit={this.handleSubmit} className="mt-4">
                    <Button className="btn-info" type="submit" />
                </FormBox>
            </div>
        );
    }
}

export default App;

有一个数组顺序，其中指示了字段的正确顺序，并且有一个映射对象，其中字段的名称。如何使 Map 中的字段顺序正确，使其按顺序排列？

const order = ['hasTitle', 'hasSubmitButton', 'hasTooltip'];
const map = {
1: 'template',
7: 'hasTooltip',
5: 'hasTitle',
6: 'hasSubmitButton'
}

结果应该是：

map = {
  5: 'hasTitle',
  6: 'hasSubmitButton',
  7: 'hasTooltip',
}

任务：找出每个拥有大学的城市的平均成绩。问题是我有大约 10 个城市，每次我都必须写 WHERE 和城市名称，例如（SELECT ID FROM UNIVERSITIES WHERE CITY='Kyiv'）。如果您告诉我如何优化它，我将不胜感激，这样您就不会手动编写每个城市。

   SELECT AVG (MARK)
    FROM EXAM_MARKS E
    WHERE STUDENT_ID IN (SELECT ID FROM STUDENTS WHERE UNIV_ID IN (
               SELECT ID FROM UNIVERSITIES  WHERE CITY='Киев'))

有一个包含 Search.jsx 的 Posts.jsx 组件，问题是我不知道如何正确地制作 Search 组件——它应该是功能性的还是通过一个类。以及点击 Posts 组件中的搜索按钮时如何从输入中传递值。

帖子.jsx

import React from 'react';

import { CardList } from '../../components/card-list/card-list.component';
import { Search } from '../../components/search/search.component';
import postApi from '../../services/postApi';

class PostsListPage extends React.Component {
    constructor() {
        super();

        this.state = {
            posts: [],
            search: '',
        };
    }

    componentDidMount() {
        postApi.getPosts().then(({ data }) => {
            this.setState({ posts: data.list });
        });
    }

    render() {
        const { posts, search } = this.state;

        return (
            <div className="container">
                <Search placeholder="Search post" />
                <CardList posts={posts} />
            </div>
        );
    }
}

export default PostsListPage;

搜索.jsx

import React from 'react';

export const Search = ({ placeholder, handleClick }) => (
    <div className="mb-3 d-flex">
        <input type="text" className="form-control" name="search" placeholder={placeholder} />
        <button type="button" className="btn btn-primary" onClick={handleClick}>
            Search
        </button>
    </div>
);

我遇到一个问题，添加块时，我创建了一个日历，我必须将明天的日期写入其中，问题是如果今天是第31天和第7个月，那么添加+1天应该算01.08，但现在添加后，它给出了 32.07。如果您告诉我如何正确操作，我将不胜感激。

addDayOff() {
            let nowDate = new Date();
            let date = nowDate.getDate() + 1;
            let month = nowDate.getMonth() + 1;
            let year = nowDate.getFullYear();

            if (date <= 9) date = `0${date}`;
            if (month <= 9) month = `0${month}`;

            this.calendar.unshift({
                startDate: `${year}-${month}-${date}`,
                endDate: `${year}-${month}-${date}`,
                onGoingStartDate: `${month}-${date}`,
                onGoingEndDate: `${month}-${date}`,
                startTime: this.ruleData.startTime,
                endTime: this.ruleData.endTime,
            });
        },

每个块都有一个按钮，单击时，粘性类被添加到该块中，当我单击另一个块中的按钮时，我想从所有块中完全删除粘性类。我通过 ref 添加一个类，但问题是当我想删除所有元素时，什么都没有发生，可能是什么问题？

<div v-for="(item, index) in items" :key="index" :ref="`block-${index}`">
 <button @click="removeClass(index)>click</button>
</div>

methods: {
 removeClass(index) {
   this.items.forEach((item, ind) => {
      this.$refs[`block-${ind}`].classList.remove('sticky');
   });
   this.$refs[`block-${index}`][0].classList.add('sticky');
 }
}

有一个元素列表，每个元素都有一个Show more按钮，问题是当你在控制台点击按钮时，可以看到isOpen键元素发生了变化，但是页面上的元素并没有打开， 可能是什么问题呢？

在 App.vue 中，我获取请求中的项目，然后添加 isOpen 参数并将列表传递给 Items 组件

应用程序.vue

<Items :matches="matches" />

methods() {
async getItems() {
 const response = await axios.get('api/items');
 if (data.checkResult.response.length) {
       this.matches = data.checkResult.response.map((item) => {
          item.isOpen = false;
          return item;
        });
  }
 }
}

物品.vue

<template>
<div v-for="(elem, indexElem) in personList" :key="indexElem">
   <div>{{ elem.text }}
   <div class="elem.isOpen ? 'active' : ''" @click="showMore(indexElem)">Show more</div>
</div>
</template>

<script>
export default {
props: {
         matches: {
            type: Array,
            required: false,
            default: () => [],
        },
    },

  computed: {
    personList() {
      const newMatchesArray = this.matches.map((elem) => { Делаю нужные изменения ...});
      return newMatchesArray;
    }
  },

  methods: {
        showMore(ind) {
            this.personList[ind].isOpen = !this.personList[ind].isOpen;
        },
    },
}
</script>

我有一个主数组：

mainArr = [
  {
    label: 'address',
    value: [
      [{name: 'item 1'}, {name: 'item 2'}, ...],
      [{name: 'item 3'}, {name: 'item 4'}, ...]
    ]
  },
  ...
]

我需要创建一个如下所示的新对象：

newObj = {
  address: [
    [{name: 'item 1'}, {name: 'item 2'}, ...],
    [{name: 'item 3'}, {name: 'item 4'}, ...]
  ],
  ...
}

我的代码的问题是它创建了一个额外的数组并获得了这个结果：

newObj = {
      address: [
        [
           [{name: 'item 1'}, {name: 'item 2'}, ...],
           [{name: 'item 3'}, {name: 'item 4'}, ...]
       ]
      ],
      ...
    }

我怎么解决这个问题？

const newMatchesArray = mainArr.map((elem) => {
    const addressArr = elem
                    .filter((item) => item.label.toLowerCase() === 'address')
                    .map((item) => item.value);

    let newItem = {};
    newItem.address = addressArr;
    return newItem;
});

我有一个对象数组：

const arr = [
{
label: 'Phone',
value: '',
},
{
label: 'Phone 1',
value: '',
},
{
label: 'email',
value: '',
}
]

需要检查 value 是否为空且此标签在 contacts = ['phone', 'email'] 数组中，则 value 必须分配无权限。我的代码的问题是它只找到了Email，Phone，但是Phone 1没有找到它，但是它应该，即Phone 1也应该被分配没有权限。

arr.map((item) => {
   if (!item.value) {
        const contacts = ['phone', 'email'];
        const hasLabel = contacts.includes(item.label.toLowerCase());
        item.value = hasLabel ? 'No permission' : item.value;
    }

   return item;
});

如何正确清除文件类型的输入值？在 BaseFileUpload 组件上，我添加了 v-model="photo" 但在控制台中出现错误"InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string."

BaseFileUpload.vue

<template>
    <div class="form-group">
        <label v-if="label">{{ label }}</label>
        <input
            type="file"
            class="form-control-file"
            ref="fileupload"
            :value="value"
            @change="onChange($event.target.files)"
        />
    </div>
</template>

<script>
export default {
    name: 'BaseFileUpload',

    props: {
        label: {
            type: String,
            required: false,
            default: '',
        },

        value: {
            type: File
        },
    },

    methods: {
        onChange(files) {
            this.$emit('change', files[0]);
        },
    },
};
</script>

表单.vue

<BaseFileUpload v-model="photo" @change="onChangeFileUpload($event)" />
<button @click="clear()">clear</button>

data() {
        return {
            photo: null,
        };
    },

methods: {
  clear() {
    this.photo = null;
  }
}

有一个对象，其键 formatFields 包含一个数组：

{
  formatFields: [
     {name: 'item 14'},
     {
       groups: [
         {name: 'item 12'},
         {name: 'item 13'},
       ]
     },
     {name: 'item 17'},
  ]
}

我需要找到组并获取其元素，以便最终结果是这样的：

{
  formatFields: [
     {name: 'item 14'},
     {name: 'item 12'},
     {name: 'item 13'},
     {name: 'item 17'},
  ]
}

如果您告诉我解决方案，我将不胜感激。我的代码的问题是带有组的元素总是被添加到最后。

formatFields.forEach((item) => {
                if (typeIs(item, 'object') && hasOwnProps(item, 'group')) {
                    item.groups.forEach((elem) => {
                        formatFields.push(elem);
                    });
                }
            });

formatFields = formatFields.filter((item) => !hasOwnProps(item, 'group'));

有一个父组件 List.js，在其中的 componentDidMount 挂钩上，我获得了我将在此组件中使用的类别以及我想在子 AddPostForm.js 中使用的类别。在AddPostForm组件中，我在状态中有一个title，body是两个input，category指的是select标签，当在这个select中选择了一个选项，就赋值给了category。问题是在初始化AddPostForm组件时，我需要在category中设置默认值（取this.props.categories[0].name中的第一个元素）。如何正确地做到这一点？

AddPostForm.js

import React from 'react';
import postApi from '../../services/postApi';

class AddPostForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            body: '',
            category: ''
        };
    }

    handleInputChange = event => {
        const name = event.target.name;
        const value = event.target.value;

        this.setState({
            [name]: value
        });
    };

    formSubmit = async event => {
        event.preventDefault();
        const { status, data } = await postApi.addPost({
            title: this.state.title,
            body: this.state.body,
            category: this.state.category,
        });

        if (status === 200) {
            this.setState({
                title: '',
                body: '',
                category: this.props.categories[0].name
            });

            this.props.addPost(data);
        }
    };

    render() {
        return (
            <form onSubmit={this.formSubmit} className="mb-3">
                <div className="form-group">
                    <input type="text" name="title" className="form-control" value={this.state.title} onChange={this.handleInputChange} />
                </div>
                <div className="form-group">
                    <textarea name="body" className="form-control" value={this.state.body} onChange={this.handleInputChange} />
                </div>
                <div className="form-group">
                    <select className="form-control" name="category" value={this.state.category} onChange={this.handleInputChange}>
                        {this.props.categories.map(item => (
                            <option key={item._id}>{item.name}</option>
                        ))}
                    </select>
                </div>
                <button className="btn btn-primary">Add</button>
            </form>
        );
    }
}

export default AddPostForm;

List.js

import React from 'react';
import categoryApi from '../../services/categoryApi';
import AddPostForm from './AddPostForm';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            posts: [],
            categories: [],
        };
    }

    componentDidMount() {
        categoryApi.getCategories().then(response => {
            if (response.data.length) {
                this.setState({
                    categories: response.data
                });
            }
        });
    }

    addPost = async post => {
        this.setState(prevState => ({
            posts: [...prevState.posts, post],
        }));
    };

    render() {
        return (
            <div className="shadow p-3 mt-4">
                <AddPostForm categories={this.state.categories} addPost={this.addPost} />
            </div>
        );
    }
}

export default List;

对于显示和编辑页面，我有一个组件，但问题是我不知道如何确定选择哪个页面，我该怎么做？在 vue-router 中，我们可以给路由命名，也许在 react-router 中我们可以这样做？

应用程序.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';

import Header from './Header';
import Home from './Home';
import List from './Post/List';
import Single from './Post/Single';

function App() {
    return (
        <div className="App">
            <Header />
            <div className="container">
                <Switch>
                    <Route path="/" component={Home} exact />
                    <Route
                        path="/posts"
                        render={({ match: { path } }) => (
                            <>
                                <Route path={`${path}/`} component={List} exact />
                                <Route path={`${path}/show/:id`} name="show" component={Single} />
                                <Route path={`${path}/edit/:id`} name="edit" component={Single} />
                            </>
                        )}
                    />
                </Switch>
            </div>
        </div>
    );
}

export default App;

单.js

import React from 'react';

class Single extends React.Component {
    constructor(props) {
        super(props);
        this.state = { page: '' };
    }

    render() {
        return (
            <div>{this.state.page}</div>
        );
    }
}

export default Single;

有2个对象：

Ojb1: {
   map: ['item 1', 'item 2'],
   settings: {
      key1: 1,
      key2: 2
   }
}

Ojb2: {
   map: ['item 3'],
   settings: {
      key3: 3
   }
}

如何将 obj2 中的所有内容添加到 obj1 以获得：

Ojb1: {
       map: ['item 1', 'item 2', 'item 3'],
       settings: {
          key1: 1,
          key2: 2,
          key3: 3
       }
    }

有 2 个动态部分 Question 和 Answer，这两个部分中的每一个都有一个组件 question/test.vue 和 answer/test.vue 并且它们完全相同，除了方法名称，question/test.vue 有一个 changeQuestion()方法和答案/测试 .vue 有一个 changeAnswer() 方法。我想将 test.vue 移动到全局组件，但是如何解决方法名称不同的问题？

答案/test.vue

<template>some code</template>
<script>
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'Test',

    methods: {
        ...mapActions(['changeAnswer']),

        onChange(state) {
            this.changeAnswer();
        },

        pageChange() {...}
    },
};
</script>

问题/test.vue

<template>some code</template>
<script>
import { mapActions, mapGetters } from 'vuex';

export default {
    name: 'Test',

    methods: {
        ...mapActions(['changeQuestion']),

        onChange(state) {
            this.changeQuestion();
        },

        pageChange() {...}
    },
};
</script>

{text: ' some text'}您需要遍历 translates 数组并删除文本开头之前的所有空格，或者如果测试中只有空格，则将它们全部删除，以便只有一个空字符串，例如，而不是{text: 'some text'}. 我是这样做的，但为什么它不起作用replace(/^\s+/g, "")，可能是什么错误？

const translates = [
   { text: '    some text' },
   { text: '           ' }
]


translates.forEach(item => {
   item.text = item.text.replace(/^\s+/g, "");
})

console.log(translates);

req.body.categories 带有一组选定的类别，例如 [{name: 'vue'}, {name: 'react'}...] 我如何找到并显示所有具有此类类别的帖子？在我的代码中，我想绕过 forEach 循环，但在控制台中出现错误SyntaxError: await is only valid in async function

exports.filter = async function(req, res) {
try {
if (req.body.categories.length) {
  let postsArr = []
  req.body.categories.forEach(item => {
    const post = await Post.find({ category: item.name });
    if (post) {
      postsArr.push(post)
    }
  })

  res.status(200).send(postsArr);
}
} catch (error) {
    res.status(500).send(error);
}

};