小编ros*_*mbo的帖子

在那里,我得到以下行的ESlint错误 this.state.items.map(item => (

错误是 Must use destructuring state assignment

{
            this.state.items.map(item => (
              <div key={item}>
                {
                item.links.map(thing => (
                  <NavLink
                    key={thing.link.id}
                    exact
                    to={thing.link.url}
                  >
                    {thing.link.text}
                  </NavLink>
                ))
                }
              </div>
            ))
          }

使用"eslint-config-airbnb"

如果这是相关的,这也是我的componentDidMount函数

componentDidMount() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

任何尝试和理解这一点的帮助都会很棒.谢谢

我已经建立了一个电子邮件简报注册表格,从我的网站发布到mailchimp.我已将Google reCAPTCHA添加到表单中并进行数据回调以启用提交按钮,因为它最初被禁用.这在昨晚的所有浏览器中运行良好,并且成功进行了测试并在其上签了字.然后回家了.我今天早上到了,发现订阅按钮不会启用/ data-callback不起作用？奇怪..

打回来

<div class="g-recaptcha" data-callback="recaptcha_callback" data-sitekey="xxxxx"></div>  

表格底部的输入按钮

<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" disabled>

脚本

<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>    
<script type="text/javascript">
    $(document).ready(function() {
      function recaptcha_callback(){
        alert("callback working");
        $('.button').prop("disabled", false);
      }
    )};
</script>

我收到错误无法编译 Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

文件：

{
    this.state.items.map((item) => {
       return (
         <div key={item}>
             <a href={item.mainContact.phoneHref + item.mainContact.phone}>
                <i className="fa fa-phone" />
                <strong>{item.mainContact.phone}</strong>
              </a>
          </div>
        );
    })
}

任何能帮助我理解错误的人都会很棒。

谢谢

更新

我的 .eslintrc.json 文件：

{
  "env": {
    "browser": true,
    "jest": true
  },
  "extends": ["airbnb"],
  "parser": "babel-eslint",
  "rules": {
      "class-methods-use-this": 0,
      "react/jsx-filename-extension": [
          "error",
          {
            "extensions": [".js", ".jsx"]
          }
      ]
  }
}

这是我来自 package.json 的 devDependencies

"devDependencies": {
  "babel-eslint": "^9.0.0",
  "babel-loader": …

我有一个平面列表，我想以类似网格的方式显示，使用容器的 100% 宽度，但是我似乎无法使用平面列表来实现这一点。
我的空格位于两侧（根据图像），空格周围将容器中的框居中，空格均匀地执行相同的操作，带有 marginRight 的 flex-start 不准确。不完全确定如何实现这一目标？谢谢

<FlatList
    numColumns={3}
    columnWrapperStyle={{ justifyContent: "space-between"}}
    contentContainerStyle={{
       marginTop:20 
    }}
    data={data}
    keyExtractor={item => item.id}
    renderItem={renderItemComponent}
/>

问题： 需要类似时尚之间的空间，但如果行中有 2 个项目，则根据动态数据将第二个项目移动到中间？

目标：

• 尝试使用具有播放暂停状态的本地文件向我的项目添加背景声音。

加载外部 URL 文件似乎没问题并且播放/暂停正常，但不是本地文件。

问题：

• 另外，URL http://....mp3 文件可以播放而我的本地文件不能播放的确切原因是什么？

问题：

• 网络状态为Status Code: 206 Partial Content
• 控制台错误是Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

HTML：

    <div class="music-player">
        <audio
          ref="audio"
          preload="auto"
          volume="0.1"
          muted
          loop
        >
          <source :src="file" />
        </audio>
        <div @click="toggleSound(file)" class="toggle-sound paused"></div>
      </div>

JS：

    data: () => ({
      ...,
      file: "/public/audio/bg-music.mp3"
    }),
    methods: {
    toggleSound() {
        let audio = this.$refs.audio;
        if (
          audio.paused &&
          document.querySelector(".toggle-sound").classList.contains("paused")
        ) {
          console.log("play it")
          audio.play();
          document.querySelector(".toggle-sound").classList.remove("paused");
        } else …

尝试使用 wordpress API 获取帖子标签 - api 调用是 /wp-json/wp/v2/posts

ourHTMLString += '<i class="fa fa-tags">"' + postsData[i].tags + '"</i>';

它正在返回这些值

"tags": [
        766,
        19,
        578
],

我需要标签名称和href，不知道如何获得。我已经尝试过 postsData[i].wp:term[i].tag.name- 找不到解决方案。有什么帮助吗？谢谢

嗨，我很努力地了解/我的React Project消失了这个错误。

Prefer default export import/prefer-default-export

Helpers.js错误指向：

export function getItems() {
  fetch('./data/data_arr.js')
  .then(results => results.json())
  .then(results => this.setState({ items: results }));
}

导入功能：

import { getItems } from '../helpers/helpers';

componentDidMount() {
    getItems.call(this);
}

我尝试无济于事：

"rules": {
     "import/prefer-default-export": off,
     ...
}

我是否需要在函数中添加“默认”？ export default function getItems() {...}

谢谢

我想在 headerRight 导航选项上显示两个按钮，但是，react-navigation-header-buttons 似乎不允许多个标题按钮组件只使用一个。我想用一个无法工作的组件管理一些状态，因为我在我的导航器文件中/钩子不起作用，因为它不是一个功能组件。

文档：

这种方法显然行不通：

headerRight: (
<HeaderButtons HeaderButtonComponent={SoundButton}>
  <Item
    title="Sound" //key
    color="white"
  />
</HeaderButtons>
<HeaderButtons HeaderButtonComponent={ShareButton}>
   <Item
     title="Share" //key
     color="white"
   />
</HeaderButtons>
),

这种方法既不是：

headerRight: (
<HeaderButtons>
      <Item
        title="Sound" //key
        color="white"
        ??? component to call - ButtonElement = ?
      />
      <Item
        title="Share" //key
        color="white"
         ??? component to call - ButtonElement = ?
      />
</HeaderButtons>
)

声音按钮：

//React Deps
import React from "react";
import { HeaderButton } from "react-navigation-header-buttons";
import { useDispatch, useSelector …