小编Dan*_*anV的帖子

我对react.js很新,我正在通过构建砌体样式布局进行实验.

我将每个元素渲染到DOM,然后我需要遍历每个项目并根据前面的元素应用x和y位置.

初始模型如下所示:

[
  {
    "title": "The Forrest",
    "description": "some cool text",
    "imgSmallSrc": "/img/img4-small.jpg",
    "imgAlt": "Placeholder image",
    "tags": [
        "Design",
        "Mobile",
        "Responsive"
    ],
    "date": 1367154709885,
    "podStyle": {
      "width": 253
    }
  }
]

(我只展示了一个项目以保持简短).

一旦我完成循环并获得我的x和y数据,我想将其应用于podStyle对象.我用以下数据调用setState:

[
  {
    "podStyle": {
      "x": 0,
      "y": 0,
      "height": 146,
      "width": 253
    }
  }
]

这似乎从模型中删除了所有当前数据,只留下podStyle数据.我误解了这次合并的效果吗？

在此先感谢您的帮助!

我正在尝试使用WebAudio API并尝试构建一个分析器,用户可以与之交互并最终打开和关闭音乐中的不同频率,以隔离音轨内的不同节拍,即低音,踢等.

我正在使用Canvas可视化频率数据,并希望用户能够突出显示部分可视化和反过来的静音频率.

默认情况下,可视化将如下所示,用户将听到所有频率.

但是当用户选择几个条形图时,灰色的条形图会使相关频率静音:

我的想法是,我可以对frequencyData数组进行反向工程,并基本上将相关频率静音吗？

**更新**

所以我一直在玩几个串联biquadFilter类型的s notch,然后调整它们的频率和Q值.这有助于隔离音乐的拍摄,但不完全是我想要的.这是我到目前为止使用的代码......

const audioContext = new window.AudioContext();
const source = audioContext.createMediaElementSource(element);
const biquadFilter1 = audioContext.createBiquadFilter();
const biquadFilter2 = audioContext.createBiquadFilter();
const biquadFilter3 = audioContext.createBiquadFilter();
const analyser = audioContext.createAnalyser();

biquadFilter1.connect(analyser);
biquadFilter2.connect(analyser);
biquadFilter3.connect(analyser);
source
    .connect(biquadFilter1)
    .connect(biquadFilter2)
    .connect(biquadFilter3);
analyser.connect(audioContext.destination);

我不确定我是否正确设置了它,但它确实允许我非常粗略地操纵频率,但感觉就像没有准确的科学这样做.

是我尝试的可能,如果是的话,任何建议真的很感激:)

我对Jest很陌生,不可否认我是测试异步代码的专家......

我有一个简单的Fetch帮手:

export function fetchHelper(url, opts) {
    return fetch(url, options)
        .then((response) => {
            if (response.ok) {
                return Promise.resolve(response);
            }

            const error = new Error(response.statusText || response.status);
            error.response = response;

            return Promise.reject(error);
        });
    }

并像这样实现它:

export function getSomeData() {
    return (dispatch) => {
        return fetchHelper('http://datasource.com/').then((res) => {
            dispatch(setLoading(true));
            return res.json();
        }).then((data) => {
            dispatch(setData(data));
            dispatch(setLoading(false));
        }).catch(() => {
            dispatch(setFail());
            dispatch(setLoading(false));
        });
    };
}

但是,我想测试在正确的情况下以正确的顺序触发正确的调度.

这曾经很容易用a sinon.spy(),但我无法弄清楚如何在Jest中复制它.理想情况下,我希望我的测试看起来像这样:

expect(spy.args[0][0]).toBe({
  type: SET_LOADING_STATE,
  value: true,
});


expect(spy.args[1][0]).toBe({
  type: SET_DATA,
  value: {...},
}); …

我正在使用Webpack和Babel来构建和转换我的ES6代码.但是,在尝试支持旧浏览器时,我缺少重要的Polyfill.例如iOS8.

这是我的Webpack.config

const versions = {
  v1: './src/js/v1.js',
  v2: './src/js/v2.js',
  v3: './src/js/v3.js',
};

module.exports = {
  entry: versions,
  output: {
    path: __dirname + '/dist',
    filename: '[name].min.js'
  },
  externals: {
    'jquery': 'jQuery'
  },
  module: {
    loaders: [
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        loader: 'babel-loader',
      }, {
        test: /\.hbs$/,
        loader: 'handlebars-loader',
      }
    ]
  }
}

我的.babelrc档案:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 3 versions", "iOS >= 8"]
      }
    }]
  ]
}

首先,为什么不添加这种Polyfill？其次,我该如何添加它？我试图把它添加到我.babelrc "plugins": ["whatwg-fetch"]没有运气.

我相信我可以将它添加到我的Webpack配置的条目中,但这在我的实例中不起作用,因为我有多个脚本,我试图单独构建. …

我正在使用Google Calendar API，并试图在触发日历事件时接收推送通知https://developers.google.com/calendar/v3/push

我认为一切设置正确...

gapi.client.calendar.events.watch({
  calendarId: 'primary',
  resource: {
    id: uuid,
    type: 'web_hook',
    address: window.location.href,
  },
}, (err, response) => {
  if (err) {
    console.log('err:', err);
  } else {
    console.log('response:', response);
  }
}).then((res) => {
  console.log('res:', res);
});

但我想不是。当我调用上面的代码时，我得到200响应

{
 "kind": "api#channel",
 "id": "...",
 "resourceId": "...",
 "resourceUri": "https://content.googleapis.com/calendar/v3/calendars/primary/events?alt=json&maxResults=250&alt=json",
 "expiration": "1554203159000"
}

我相信我也应该收到同步消息，但我没有（https://developers.google.com/calendar/v3/push#sync）

为了测试，我正在修改日历本身中的一个事件（更改标题，日期，删除等），并且我希望浏览器中会发生一些事情，但是什么也没发生。

我一般不熟悉Push通知，因此不完全确定会发生什么。

我已经通过身份验证并按照https://developers.google.com/calendar/quickstart/js显示事件

我想念什么？任何帮助都非常感谢！

提前致谢！

我已经构建了一个使用History.js插件的站点,使用AJAX在页面之间导航,并相应地更新URL.一切都运行良好,除了IE; 当您刷新页面时,它实际上会加载您来到的第一页的内容,而不是当前页面内容.在"体面"的浏览器中,它不会从任何页面加载内容,它只是加载该URL的整个页面,这是我应该做的IE.

我在想它不知道如何处理哈希.如果你访问http://www.crownacre.voyced.com/contact-us/它工作正常,但当你访问http://www.crownacre.voyced.com/#contact-us/(与哈希)它没有.

如果在路径名中检测到#,我试图重定向页面,但是没有办法将其检测为window.location.pathname和History.getHash()返回没有任何哈希的路径.

有什么建议？我看过一些网站使用这个插件有同样的问题,这里有类似的问题,但没有解决方案.

提前致谢!

我有一个JSON文件夹,我想用它来创建一个简单的API.

这是我的文件夹结构的简化版本:

/clients.json

/clients/1/client.json

/clients/2/client.json

...

我的/clients.json文件看起来像这样:

[
    {
        "id": 1,
        "name": "Jon Parker"
    },
    {
        "id": 2,
        "name": "Gareth Edwards"
    },
    ...
]

我的/clients/1/client.json文件看起来像这样:

[
    {
        "date": "2014-09-12",
        "score": 40,
        ...
    },
    {
        "date": "2015-02-27",
        "score": 75,
        ...
    },  
    {
        "date": "2015-05-10",
        "score": 75,
        ...
    },
    {
        "date": "2016-08-27",
        "score": 60,
        ...
    }
]

id from clients.json与相关详细信息所在的文件夹相关.

我在客户端文件夹中有很多JSON文件,而不是在客户端单独加载这些文件,我想使用Node.js创建一个API,这给了我更多的灵活性,即...

返回客户名称和id的列表 /clients

返回客户详细信息 /clients/:id/details

最重要的是,返回所有客户的名称和相关细节 /clients/all/details

我确实开始玩json-server,但它要求你的JSON是一个对象而不是一个数组,不幸的是我坚持使用这个JSON的格式.

感谢任何帮助!

我正在构建一个实体荧光笔,因此我可以上传文本文件,查看屏幕上的内容,然后突出显示数组中的单词.这是用户在手动突出显示选择时填充的数组,例如..

const entities = ['John Smith', 'Apple', 'some other word'];

This is my text document that is displayed on the screen. It contains a lot of text, and some of this text needs to be visually highlighted to the user once they manually highlight some text, like the name John Smith, Apple and some other word

现在,我希望通过将其包装在某个标记中来直观地突出显示文本中实体的所有实例,并且执行类似这样的操作非常有效:

getFormattedText() {
    const paragraphs = this.props.text.split(/\n/);
    const { entities } = this.props;

    return paragraphs.map((p) => {
        let entityWrapped = p;

        entities.forEach((text) => { …

我希望用户能够对待办事项列表进行排序。当用户从下拉列表中选择一项时，它将设置，sortKey这将创建的新版本setSortedTodos，并依次触发useEffectand调用setSortedTodos。

下面的示例完全按照我想要的方式工作，但是eslint提示我将其添加todos到useEffect依赖数组中，如果执行此操作，则会导致无限循环（如您期望的那样）。

const [todos, setTodos] = useState([]);
const [sortKey, setSortKey] = useState('title');

const setSortedTodos = useCallback((data) => {
  const cloned = data.slice(0);

  const sorted = cloned.sort((a, b) => {
    const v1 = a[sortKey].toLowerCase();
    const v2 = b[sortKey].toLowerCase();

    if (v1 < v2) {
      return -1;
    }

    if (v1 > v2) {
      return 1;
    }

    return 0;
  });

  setTodos(sorted);
}, [sortKey]);

useEffect(() => {
    setSortedTodos(todos);
}, [setSortedTodos]);

现场示例：

const [todos, …

我正在创建一个对象(dataObj),它在$ getJSON中返回其中的几个项目:

var cities = ['london', 'paris', 'munich', 'geneva', 'prague', 'vienna', 'barcelona', 'istanbul'],
    totalCities = cities.length,
    i = 0,
    $container = $('#cities'),
    htmlFragment,
    data,
    obj,
    dataObj = {
        cities:[]
    };

function appendData() {

    var city = cities[i],
        locationQuery = escape("select item from weather.forecast where woeid in (select woeid from geo.places where text='" + city + "') and u='c'"),
        locationUrl = "https://query.yahooapis.com/v1/public/yql?q=" + locationQuery + "&format=json&callback=?";

    if ( i === cities.length ) { return };

    $.getJSON( locationUrl, function( data ) { …

我想在网页上有一个链接，允许用户发送图像（带预览）和一个单独的网页链接。

它会是这样的：

<a href="https://wa.me/?text=https://images.com/image1.jpg%20https://mycoolwebsite.com">Share on WhatsApp!</a>

但是，这仅返回 2 个链接。我知道og我的 html 页面上可以只有元标记，但我想要显示更大的图像。

有什么想法吗？

提前致谢 ：）

所以我以为我已经掌握了这些钩子的窍门，但是 lint 规则react-hooks/exhaustive-deps让我绊倒了。

我的Provider 中有这个方法

const onScreenChange = useCallback(
(key, value) => {
  const newState = Object.assign({}, screenState, { [key]: value });
  localStorage.setItem('screens', JSON.stringify(newState));
  setScreenState(newState);
},
[]); // screenState

我允许我的应用程序的其余部分通过将它传递到 value 属性来访问它......

return <Provider value={{onScreenChange, ... }}>children</Provider>

然后当路由改变时我从子组件调用这个方法

useEffect(() => {
   if (match.path === `/${screenKey}`) {
     onScreenChange(screenKey, 'external');
   }
}, [onScreenChange, match.path, screenKey]);

上面的代码完全按照我的要求工作，我看不到这会导致任何错误。然而 eslint 告诉我：

React Hook useCallback has a missing dependency: 'screenState'. Either include it or remove the dependency array

当我添加screenState到数组中时，只要onScreenChange …

我终于开始涉足使用Next.js的服务器端 React 世界，但是我对这个问题感到非常困惑。

我正在使用以下方式调用pages/customer-preferences.tsxAPIisomorphic-unfetch

CustomerPreferencesPage.getInitialProps = async () => {
  const res = await fetch(API_URL + '/preference-customer');
  const initialData = await res.json();
  return { initialData };
};

一切都可以在本地模式下正常工作dev，或者一旦构建并运行build> start。为了托管它，我从 docker 容器运行它node:10，当我在本地运行它时，一切都很好。该问题仅在部署后才会发生。

当我导航到/然后单击链接时/customer-preferences，所有作品均按预期进行。但是，如果我刷新页面或直接加载页面，/customer-preferences我会从 Next.js 看到此错误

因此，该问题似乎仅在尝试从服务器而不是客户端进行 API 调用时才会发生。

我还设置了一个简单的快速服务器来代替使用，但不确定这是否有必要？！

const express = require('express');
const next = require('next');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ …