小编fju*_*urr的帖子

yarn sequelize db:migrate我正在使用 docker-compose，当我尝试在控制台中运行时出现以下错误：

“已加载配置文件“src/config/database.js”。错误：getaddrinfo ENOTFOUND db”

一切正常，但我无法运行我的迁移。

Dockerfile

FROM node:alpine

WORKDIR /usr/app
COPY package.json yarn.lock ./

RUN yarn

COPY . .

EXPOSE 3000
CMD ["yarn", "dev"]

Docker-compose.yml

version: '3'

services:
  api:
    container_name: api
    build: .
    ports:
      - '3000:3000'
    command: yarn dev
    volumes:
      - .:/usr/app
    links:
      - db

  db:
    container_name: db
    image: mysql:5.7
    volumes:
      - ./data:/mysql/db
    ports:
      - '3306:3306'
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: be_db
      MYSQL_USER: root
      MYSQL_PASSWORD: password

.env

# Database Variables
DB_HOST=db
DB_USER=root
DB_PASS=password
DB_NAME=be_db
DB_PORT:3306

/src/config/database.js

require('dotenv').config(); …

我对反应还很陌生，现在我有一个函数可以在我的 useEffect钩子中，使用加载状态来管理组件渲染，然后使用该数据加载我的状态组件，一切正常。

但是现在我必须实现另一个函数来获取其他一些数据。

如何以最好的方式实现这一点？我是否需要创建另一个useEffect为另一个 fetch 函数？

这是我的代码：

export default function Home() {
  const [ageOptions, setAgeOptions] = useState([])
  const [age, setAge] = useState('')
  const [loading, setLoading] = useState(false)

  // get age option from API
   useEffect(() => {
    setLoading(true)
    const fetchAgeOptions = () => {
     // transform the data to load properly in my react-select component
      function transform(data) {
        const options = data.map(function (row) {
          return { value: row.id, label: row.description, startAge: row.startAge, endAge: row.endAge }
        })
        setAgeOptions(options)
        setLoading(false) …

我有以下代码。这个想法是为模拟组件创建一个简单的加载

const [loading, setLoading] = useState(false)

  function mockLoading () {
    setLoading(true)
    console.log('1', loading)
    setTimeout(() => {
      setLoading(false)
      console.log('2', loading)
    }, 3000)
  }

  useEffect(() => {
    mockLoading()
  }, []);

但由于某种原因， setLoading 不起作用。Console.log 1 和 2 都是假的

这里的目标是减少组件中的代码量，如下所示：

import {
  increaseProductQuantity as increaseProductQuantityAction,
  decreaseProductQuantity as decreaseProductQuantityAction,
} from '~/store/modules/createCampaign/actions'

export default function MyComponent() {
  const dispatch = useDispatch()

  function increaseSurveyQuantity() {
    dispatch(increaseProductQuantityAction('survey'))
  }

  function decreaseSurveyQuantity() {
    dispatch(decreaseProductQuantityAction('survey'))
  }

  function increaseRewardQuantity() {
    dispatch(increaseProductQuantityAction('reward'))
  }

  function decreaseRewardQuantity() {
    dispatch(decreaseProductQuantityAction('reward'))
  }
}

我尝试为调度操作的函数创建一个单独的文件，如下所示：

import { useDispatch } from 'react-redux'

import {
  increaseProductQuantity as increaseProductQuantityAction,
  decreaseProductQuantity as decreaseProductQuantityAction,
} from '~/store/modules/createCampaign/actions'

const dispatch = useDispatch()

export function increaseSurveyQuantity() {
  dispatch(increaseProductQuantityAction('survey'))
}

export function decreaseSurveyQuantity() {
  dispatch(decreaseProductQuantityAction('survey'))
}

export function increaseRewardQuantity() { …