小编Fac*_*cca的帖子

React setState不更新状态

所以我有这个:

let total = newDealersDeckTotal.reduce(function(a, b) {
  return a + b;
},
0);

console.log(total, 'tittal'); //outputs correct total
setTimeout(() => {
  this.setState({dealersOverallTotal: total});
}, 10);

console.log(this.state.dealersOverallTotal, 'dealersOverallTotal1'); //outputs incorrect total
Run Code Online (Sandbox Code Playgroud)

newDealersDeckTotal只是一个数字数组,[1, 5, 9]但是this.state.dealersOverallTotal不能给出正确的总数但是total呢?我甚至提出了超时延迟,看看是否解决了这个问题.任何明显的或我应该发布更多的代码?

javascript state setstate reactjs

54
推荐指数
10
解决办法
7万
查看次数

react-native react-native-vector-icons:如何使用字体真棒图标

在我的react-native应用程序中,我添加了这个库react-native-vector-icons来使用图标.在github页面中,FontAwesome列在捆绑的图标集中.但我不知道如何在我的元素中引用一个fontawesome项目.似乎我只能使用"ios-xxx","md-xxx"或"log-xxx".

当我尝试这样的事情:

<Icon name='fa-rss' style={{marginRight:10}} /> 
Run Code Online (Sandbox Code Playgroud)

我收到这个警告:

在此输入图像描述

font-awesome react-native

10
推荐指数
1
解决办法
1万
查看次数

强制.change()函数运行 - jQuery

我为ID为#country的下拉菜单设置了.change()函数.当页面加载时,我正在尝试将下拉菜单设置为"United States"并运行.change()函数:

$('#country').change(function () {
    resetDisclosure();
    var countryCode = $(this).val();
    var countryName = $('#country option:selected').text();

    $('#'+countryCode.toString()).fadeIn('slow');

    if(countryCode == 'OC' || countryCode == 'EU') {
        $('#OC h4, #EU h4').html('For Residents of <strong>' + countryName + '</strong>');
    }

    $.fancybox.resize();
    $.fancybox.center();
});

$("#country").val('OC');
$("#country").change();
Run Code Online (Sandbox Code Playgroud)

最后一个函数有错误,因为我无法在加载时强制.change().我怎样才能强制执行更改功能?

我是超级初学者,并试图将.change()函数的内容分配给不同的函数并调用它,但它也不起作用.

javascript jquery drop-down-menu

9
推荐指数
1
解决办法
1万
查看次数

反应本机获取不调用然后或捕获

我正在使用fetch在react-native中进行一些API调用,有时随机fetch不会向服务器发送请求,而我的then或except块也不会被调用.这是随机发生的,我认为可能存在竞争条件或类似情况.在这样的请求失败后,对同一API的请求永远不会被解雇,直到我重新加载应用程序.任何想法如何追踪这背后的原因.我使用的代码如下.

const host = liveBaseHost;
const url = `${host}${route}?observer_id=${user._id}`;
let options = Object.assign({
        method: verb
    }, params
    ? {
        body: JSON.stringify(params)
    }
    : null);
options.headers = NimbusApi.headers(user)
return fetch(url, options).then(resp => {
    let json = resp.json();
    if (resp.ok) {
        return json
    }
    return json.then(err => {
        throw err
    });
}).then(json => json);
Run Code Online (Sandbox Code Playgroud)

javascript fetch react-native

8
推荐指数
1
解决办法
6211
查看次数

在组件中的不同状态之间进行平滑过渡

我有一个像这样的简单组件:

var component = React.createClass({
  render: function(){
      if (this.props.isCollapsed){
         return this.renderCollapsed();
      }
      return this.renderActive()
  },
  renderActive: function(){
    return (
      <div>
      ...
      </div>
    );
  },
  renderCollapsed: function(){
    return (
      <div>
      ...
      </div>
    );
  },
});
Run Code Online (Sandbox Code Playgroud)

基本上,当属性更改时,组件将显示活动状态或折叠状态.

我在想的是,当财产发生变化时,即主动 - >崩溃,或者相反,我希望旧视图"缩小"或"展开"平滑以显示新视图.例如,如果它处于活动状态 - >折叠,我希望活动UI缩小到折叠UI的大小,并平滑地显示它.

我不知道如何达到这个效果.请分享一些想法.谢谢!

javascript css css-transitions reactjs

7
推荐指数
3
解决办法
7005
查看次数

ReactNative PanResponder限制X位置

我正在建立一个音乐播放器,我专注于进度条.我能够对滑动手势做出反应,但我无法限制手势的移动距离.

这就是我到目前为止所做的.我把所有东西都减少到了minumal:

constructor(props) {
    super(props);

    this.state = {
      pan: new Animated.ValueXY()
    };
}

componentWillMount() {
    this._panResponder = PanResponder.create({
        onMoveShouldSetResponderCapture: () => true,
        onMoveShouldSetPanResponderCapture: () => true,
        onPanResponderGrant: (e, gestureState) => {


            // Set the initial value to the current state
            let x = (this.state.pan.x._value < 0) ? 0 : this.state.pan.x._value;


            this.state.pan.setOffset({ x, y: 0 });
            this.state.pan.setValue({ x: 0, y: 0 });


        },
        onPanResponderMove: Animated.event([
            null, { dx: this.state.pan.x, dy: 0 },
        ]),
        onPanResponderRelease: (e, { vx, vy }) => { …
Run Code Online (Sandbox Code Playgroud)

android gestures react-native

7
推荐指数
2
解决办法
2932
查看次数

C#保护数据库连接信息

目前我在类文件本身中存储了我的C#mysql连接信息,这看起来并不聪明,因为最终用户可以简单地使用反射器来查看源代码,以防它没有被模糊.

我怎么能以安全的方式存储这些信息?

源代码:

private void Initialize()
{
    server = "xxx";
    database = "xxx";
    uid = "xxx";
    password = "xxx";
    string connectionString;
    connectionString = "SERVER=" + server + ";" + "DATABASE=" +
    database + ";" + "UID=" + uid + ";" + "PASSWORD=" + password + ";";

    connection = new MySqlConnection(connectionString);
}
Run Code Online (Sandbox Code Playgroud)

c# mysql

6
推荐指数
1
解决办法
801
查看次数

React / Redux:在哪里处理来自API响应的数据以及来自reducer的调度动作

我是React和Redux的新手,所以这是一个最佳实践问题。

我有一个动作创建者,它会触发API调用并将响应分发给我的reducer:

export function loadDrawSuccess(draw) {
  return { type: ActionTypes.LOAD_DRAW_SUCCESS, draw};
}

export function loadDraw() {
  return function(dispatch) {
    dispatch(beginAjaxCall());
    return drawApi.getDraw().then(draw => {
      dispatch(loadDrawSuccess(draw));
    }).catch(() => {
      dispatch(ajaxCallError());
    });
  };
}
Run Code Online (Sandbox Code Playgroud)

现在....在我的化简器中,我正在处理响应以从中提取所需的数据.....

function extractNextOpenDraw(draws) {
  if (!draws || typeof draws.content === 'undefined'){
    return {};
  }
  let openDraws = draws.content.filter(draw => {return draw.status === 'open';});
  let sortedOpenDraws = openDraws.sort((draw1, draw2) => {
    return DateHelper.getDateObjectFromUtcDateString(draw1.closeTimeUtc) - DateHelper.getDateObjectFromUtcDateString(draw2.closeTimeUtc);
  });
  return sortedOpenDraws[0];
}


export default function drawReducer(state = initialState.draw, action) {

  switch (action.type) …
Run Code Online (Sandbox Code Playgroud)

reactjs redux

5
推荐指数
1
解决办法
961
查看次数

在NodeJS中发送HTTP响应之前等待事件发生?

我正在寻找在发送HTTP响应之前等待事件发生的解决方案.

用例

  1. 我的想法是在我的一个路由中调用一个函数:zwave.connect("/dev/ttyACM5");此函数立即返回.
  2. 但是有2个事件会注意到它是否成功或无法连接设备:
zwave.on('driver ready', function(){...});
zwave.on('driver failed', function(){...});
Run Code Online (Sandbox Code Playgroud)
  1. 在我的路线中,我想知道设备在发送HTTP响应之前是否成功或无法连接.

我的"解决方案"

  1. 当事件发生时,我将事件保存在数据库中:
zwave.on('driver ready', function(){
    //In the database, save the fact the event happened, here it's event "CONNECTED"
});
Run Code Online (Sandbox Code Playgroud)
  1. 在我的路由中,执行connect函数并等待事件出现在数据库中:
router.get('/', function(request, response, next) {     
    zwave.connect("/dev/ttyACM5");
    waitForEvent("CONNECTED", 5, null, function(){
        response.redirect(/connected);
    });
});

// The function use to wait for the event
waitForEvent: function(eventType, nbCallMax, nbCall, callback){
    if(nbCall == null) nbCall = 1;
    if(nbCallMax == null) nbCallMax = 1;

    // Looking for event to happen (return true …
Run Code Online (Sandbox Code Playgroud)

events asynchronous control-flow node.js

4
推荐指数
1
解决办法
3157
查看次数

5秒后反应原生更改页面

我是反应原生的新手,我不知道如何在5秒后改变页面.

我创建了一个android.index.js文件,将导航到LandingPage.js.我想要做的是,当加载LandingPage时,它将等待5秒然后重定向/导航到另一个页面.

index.android.js

export default class DefaultProject extends Component {
 render() {
    return (
      <Navigator
        renderScene={(route, navigator) =>
          <LandingPage/>
        }
      />
  )
Run Code Online (Sandbox Code Playgroud)

LandingPage.js

export default class LandingPage extends Component {
  render() {
    return (
        <Image source={require('./images/event3.jpeg')} 
        style={styles.container} />
        //How to redirect to another page from here after 5 secs?

    );
  }
}
Run Code Online (Sandbox Code Playgroud)

react-native

4
推荐指数
1
解决办法
9611
查看次数

React Redux导出默认为2个函数

我对React很新,所以请原谅我,如果这是一个愚蠢的问题,但我坚持以下几点:

目前我有这个:

export default connect()(PrechatForm);
Run Code Online (Sandbox Code Playgroud)

现在我想用react-i18next翻译render函数中的一些文本文本.他们的导游说我必须这样做:

export default translate()(PrechatForm);
Run Code Online (Sandbox Code Playgroud)

但由于连接功能已经存在,我不知道如何将这些结合起来.最后我想它应该看起来像这样:(当然这不是有效的JS)

export default connect(PrechatForm)()translate()(PrechatForm);
Run Code Online (Sandbox Code Playgroud)

整个示例如下所示:

import { connect } from 'react-redux'
import { translate } from 'react-i18next';

class PrechatForm extends Component {
  constructor(props) {
    super(props);
  }
  render() {
  const { t } = this.props;
    return (
      {t.('translateme')}
    );
  }
}

export default connect()(PrechatForm);
Run Code Online (Sandbox Code Playgroud)

reactjs redux react-redux

3
推荐指数
1
解决办法
2079
查看次数

MediaMetadataRetriever.setDataSource(Native Method)导致RuntimeException:status = 0xFFFFFFEA

我正在使用ReactNative构建媒体播放器.为了完成这样的应用程序,我必须导出我为检索音乐元数据(如专辑,艺术家等)以及文件路径而构建的模块.

上面的代码使用jdk1.8.0_112完美地工作,但是因为我更新到jdk1.8.0_144它停止了工作.

在这个例子中,我没有检查不是null,不是空,长度> 0等,但我真的在原来的那个.

try {
    MediaMetadataRetriever mmr = new MediaMetadataRetriever();
    mmr.setDataSource("Path to the file"); // /storage/337C-1C15/Music/Edguy/Speedhoven.mp3
} catch (RuntimeException ex) {
    // java.lang.RuntimeException: setDataSource failed: status = 0xFFFFFFEA
}
Run Code Online (Sandbox Code Playgroud)

我面临两个问题.一方面,我不是一个伟大的Android开发者,所以获得一些线索是一项艰巨的任务.另一方面,错误确实提供了良好的描述.

为了防止你们中的一些人有更好的方法来完成我的尝试,我在这里留下了整个代码:

@ReactMethod
public void getAll(Callback errorCallback, Callback successCallback){

    ContentResolver musicResolver = this.getCurrentActivity().getContentResolver();
    Uri musicUri = android.provider.MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
    Cursor musicCursor = musicResolver.query(musicUri, null, null, null, null);

    if (musicCursor != null && musicCursor.moveToFirst()) {

        WritableArray jsonArray = new WritableNativeArray();
        MediaMetadataRetriever mmr = new MediaMetadataRetriever();
        WritableMap items …
Run Code Online (Sandbox Code Playgroud)

java android mediametadataretriever react-native

0
推荐指数
1
解决办法
1974
查看次数