小编Mar*_*röm的帖子

我正在使用React和Redux来开发一个webapp,当我启动我的项目时,我得到了这个:

Line 13:  Unexpected use of 'location'  no-restricted-globals

Search for the keywords to learn more about each error.

我搜索了很多关于如何解决它的问题,但我找到的答案都没有帮助我,所以我转向Stack溢出.

有谁知道如何解决这个错误？我很感激能得到的所有帮助.

我有一个map()需要根据条件显示视图的功能.我查看了有关如何编写条件的React文档,这是您编写条件的方法:

{if (loggedIn) ? (
  // Hello!
) : (
  // ByeBye!
)}

这是链接:https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator

所以,我试图在我的React应用程序中获取该知识并实现它.它结果是这样的:

render() {
  return (
    <div>
      <div className="box">
        {this.props.collection.ids
          .filter(
            id =>
              // note: this is only passed when in top level of document
              this.props.collection.documents[id][
                this.props.schema.foreignKey
              ] === this.props.parentDocumentId
          )
          .map(id =>
            {if (this.props.schema.collectionName.length < 0 ? (

              <Expandable>
                <ObjectDisplay
                  key={id}
                  parentDocumentId={id}
                  schema={schema[this.props.schema.collectionName]}
                  value={this.props.collection.documents[id]}
                />
              </Expandable>

            ) : (
              <h1>hejsan</h1>
            )}
          )}
      </div>
    </div>
  )
}

但它不起作用..!这是错误:

我感谢所有帮助!

一些信息

我在我的项目中使用 Formik，我的设置如下所示：

|-MenuModal
|--MenuEdit
|---MenuEditForm

和MenuModal的父级在哪里。该组件负责返回 Formik 表单，但我在它的 parent 中调用 submit ，它稍后通过 React 的 refs运行提交函数。乱？是的！MenuEditMenuEditFormMenuEditFormMenuModalMenuEdit

我的问题

现在我想使用的状态和回调函数来获取Formiksvalues从MenuEditForm到MenuEdit。但由于我没有使用 Formiks 自己的onSubmit：

    <Formik
        initialValues={menu}
        validationSchema={validationSchema}
        onSubmit={values => console.log('values', values)} // 'values' is undefined
        ...

我的values遗嘱是未定义的，我无法让我的提交功能通过。

所以我想知道如何访问我的valuesinMenuEditForm以便我以后可以将它传递给MenuEdit并完成我的提交功能。

谢谢阅读。

我偶然发现了React-Bootstrap.我查看了他们的文档,但我找不到任何关于居中文本的内容.像这样:

<h1 class="text-center">Hello World</h1>

所以我想知道你是否可以使用相同的技术,而是将其应用于React开发.像这样例如:

<h1 classnName="text-center">Hello World</h1>

干杯!

我正在尝试创建一个看起来像这样的网格，

第一行有两列，第二行有三列。它们的宽度应该相等，但我的绘画技巧不是最好的。

我试图通过在“Kort”细胞上使用类似的东西来靶向特定细胞来实现这一目标，

  grid-row: 1; 
  grid-column: 2/4;

但我似乎无法做到这一点。任何帮助是极大的赞赏。

今天，我一直在尝试为我的 GraphQL API 设置 Docker，该 API 与 Knex.js、PostgreSQL 和 Node.js 一起运行。我面临的问题是 Knex.js 在尝试访问我的数据库中的数据时超时。我相信这是由于我试图将它们链接在一起的错误方式。

我真的尝试过自己做这件事，但我无法弄清楚。我想浏览一下参与这项工作的每个文件，以便（希望）有人能发现我的错误并帮助我。

knexfile.js

在我的 knexfile 中，我有一个connection以前看起来像这样的密钥：

connection: 'postgres://localhost/devblog'

这工作得很好，但如果我想使用 Docker，这将不起作用。所以我稍微修改了一下，最后得到了这个：

connection: {
  host: 'db' || 'localhost',
  port: process.env.DB_PORT || 5432,
  user: process.env.DB_USER || 'postgres',
  password: process.env.DB_PASSWORD || undefined,
  database: process.env.DATABASE // DATABASE = devblog
}

我注意到host. 因为当我有其他东西（在这种情况下，db）时它总是超时localhost。

文件

我的 Dockerfile 看起来像这样：

FROM node:9
WORKDIR /app
COPY package-lock.json /app
COPY package.json /app
RUN npm install
COPY dist /app
COPY wait-for-it.sh /app …

我正在尝试使用 Next.js 设置 Firebase 的 V9 模拟器，但没有成功。我总是收到这个错误

我的 firebase 版本是9.1.1.

我的 Firebase 设置如下所示：

import { initializeApp, FirebaseApp } from "firebase/app";
import { initializeApp, FirebaseApp } from "firebase/app";
import firebase from "firebase/compat/app";
import { getAuth, connectAuthEmulator, Auth } from "firebase/auth";
import {
  getFirestore,
  connectFirestoreEmulator,
  Firestore,
} from "firebase/firestore";
import {
  getStorage,
  connectStorageEmulator,
  FirebaseStorage,
} from "firebase/storage";
import {
  getDatabase,
  connectDatabaseEmulator,
  Database,
} from "firebase/database";

let firebaseApp: FirebaseApp;
let auth: Auth;
let firestore: Firestore;
let storage: FirebaseStorage;
let db: Database; …

我不知道所有人是否都已阅读以下内容：https : //medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3?source=linkShare-367​​23b3116b2-1502668727但它基本上教您如何使用redux和redux thunk 处理一个 API请求。这是一个很好的指南，但是我想知道我的React组件是否对服务器有多个请求？像这样：

componentDidMount() {
    axios.get('http://localhost:3001/customers').then(res => {
      this.setState({
        res,
        customer: res.data
      })
    })

    axios.get('http://localhost:3001/events').then(res => {
      this.setState({
        res,
        event: res.data
      })
    })

    axios.get('http://localhost:3001/locks').then(res => {
      this.setState({
        res,
        lock: res.data
      })
    })
  }

我一直在疯狂搜索，我想我已经取得了一些进展，我的动作创建者目前看起来像这样（不知道它的100％正确）：

const fetchData = () => async dispatch => {
  try {
    const customers = await axios.get(`${settings.hostname}/customers`)
      .then(res) => res.json()

    const events = await axios.get(`${settings.hostname}/events`)
      .then(res) => res.json()

    const locks = await axios.get(`${settings.hostname}/locks`)
      .then(res) => res.json()

    dispatch(setCustomers(customers))
    dispatch(setEvents(events))
    dispatch(setLocks(locks))
  } catch(err) …

如何等到上下文值被设置？

我有一个问题，我无法从我的上下文中获取值，所以当我需要它时，我总是得到初始值"". 所以现在useEffect我的组件中有一个，

useEffect(() => {
    if (posContext.activePaymentTabId) {
        console.log("poscontext i useeffect", posContext); <-- can see my value here now
        // handlePaymentResponse(true, "GODKÄNT");
    }
}, [posContext.activePaymentTabId]);

我在这个函数中设置了我的值：

const makeCardPayment = async () => {
    posContext.handleSetActivePaymentTabId(); // <-- Here I set my value that I need later
    try {
        const res = await functionA();

        return functionB(res.foo);

    } catch (error) {}
};

但是在functionB需要我的价值的地方：

const functionB = (foo) => {
    if (foo) {
        setTimeout(() => {
            console.log("calling...", …

我现在正在尝试Prisma和React Native.目前我正在尝试使用包_apollo-upload-client(https://github.com/jaydenseric/apollo-upload-client)将图像上传到我的数据库.但它并不是那么顺利.

目前我可以选择ImagePicker来自世博会的图像.然后我试图用Apollo客户端进行变异:

await this.props.mutate({
  variables: {
    name,
    description,
    price,
    image,
  },
});

但是我收到以下错误:

Network error: JSON Parse error: Unexpected identifier "POST"
- node_modules/apollo-client/bundle.umd.js:76:32 in ApolloError
- node_modules/apollo-client/bundle.umd.js:797:43 in error

我相信它来自以下代码:

const image = new ReactNativeFile({
  uri: imageUrl,
  type: 'image/png',
  name: 'i-am-a-name',
});

这与他们的示例几乎完全相同,https://github.com/jaydenseric/apollo-upload-client#react-native.

imageUrl来自我的州.当我在console.log时,image我得到以下内容:

ReactNativeFile {
  "name": "i-am-a-name",
  "type": "image/png",
  "uri": "file:///Users/martinnord/Library/Developer/CoreSimulator/Devices/4C297288-A876-4159-9CD7-41D75303D07F/data/Containers/Data/Application/8E899238-DE52-47BF-99E2-583717740E40/Library/Caches/ExponentExperienceData/%2540anonymous%252Fecommerce-app-e5eacce4-b22c-4ab9-9151-55cd82ba58bf/ImagePicker/771798A4-84F1-4130-AB37-9F382546AE47.png",
}

所以有些东西突然冒出来了.但我无法进一步,我希望我能得到一些人的提示.

我也没有包含后端的任何代码,因为我认为这个问题存在于前端.但如果有人想看看后端我可以更新问题,或者你可以看看这里:https://github.com/Martinnord/Ecommerce-server/tree/image_uploads.

非常感谢阅读!干杯.

更新

有人问服务器中的逻辑之后我决定将其过去:

Product.ts

// import shortid from 'shortid' …

我的过滤器功能在这里很好用，但是只过滤名字（参见代码）。因此，我想知道哪种“最佳”方式也可以通过姓氏和电话进行过滤（参见图片）！这是我目前的过滤器：

const filteredUsers = this.state.dataToDisplay.filter(item => {
  return (
    /*Only firstname!*/item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) >= 0
  )
})

这是图片：

非常感谢！：D

我已经阅读了这篇文章（https://medium.com/@stowball/a-dummys-guide-to-redux-and-thunk-in-react-d8904a7005d3）几次，但我仍然不确定如何在组件内调用您的操作。

我已经正确设置了我的动作和减速器（我希望），所以我现在处于最后一步，即使用您的动作。我知道我首先必须导入我的操作，然后使用connectfrom redux 将它连接到商店。

我目前在我的组件中有这个：

  componentDidMount() {
    this.serverRequest = axios
      .get('http://helloworld/customers')
      .then(res => {
        // Rerender state
        this.setState({
          res,
          dataToDisplay: res.data
        })
      })
  }

所以我的问题是：如何在组件内部使用我的操作？