Question

我正在使用electron-boilerplate和Kurt Weiberth's tutorials来创建我的第一个node.js本机应用。我能够在教程中创建应用程序，现在我想添加一个在给定查询中流式传输新推文时更新的组件。

为此，我在下面创建了Tweet，TweetStream和TweetFeed组件。这种作品，但我一直收到错误

警告：flattenChildren（...）：遇到两个具有相同密钥的孩子###############。子键必须是唯一的;当两个孩子共用一把钥匙时，只会使用第一个孩子。

当我查看推文的状态时，没有重复，所以我不确定为什么React会遇到它们。我把东西放在了错误的地方吗？将Twit流放在Component中感觉不对，但我不确定它还能去哪里。我希望能够在某个时刻更新查询，以便在查询更新时似乎需要响应事件。

资料Tweet

import React, { Component } from 'react';

class Tweet extends Component {

  render() {
    return (<li>
      {this.props.tweet}
    </li>);
  }
}

export default Tweet;

TweetStream

从'react'导入React，{Component}; 从'./Tweet'导入Tweet;

class TweetStream extends Component {

  render() {
    return (
      <ul>
        {
          this.props.tweets.map((tweet) => {
            return <Tweet key={tweet.id} tweet={tweet.text} />;
          })
        }
      </ul>
    );
  }
}

export default TweetStream;

TweetFeed

import React, { Component } from 'react';

const express = require('express');
const Twit = require('twit');

const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

class TweetFeed extends Component {

  handleTweet(tweet) {

    this.state = {
      id: tweet.id,
      text: tweet.text
    };

    this.props.actions.addTweet(tweet);
  }

  render() {
    const ts = this;
    io.on('connection', function (socket) {
      console.log('User connected. Socket id %s', socket.id);

      socket.on('disconnect', function () {
        console.log('User disconnected. %s. Socket id %s', socket.id);
      });
    });

    const T = new Twit({
      consumer_key: 'KEY',
      consumer_secret: 'SECRET',
      access_token: 'TOKEN',
      access_token_secret: 'TOKEN_SECRET',
      timeout_ms: 60 * 1000,  // optional HTTP request timeout to apply to all requests.
    });
    const stream = T.stream('statuses/filter', { track: this.props.query });
    stream.on('tweet', function (tweet) {
      io.sockets.emit('tweet', tweet);
      ts.handleTweet(tweet);
    });

    return (<div />);
  }
}

export default TweetFeed;

推文缩减

const initialTwitterState = [];

export default function reducer(state = initialTwitterState, action) {
  switch (action.type) {
    case 'ADD_TWEET':
      return [{id: action.text.id, text: action.text.text}, ...state];
    default:
      return state;
  }
}

这些是从Home组件调用的

// @flow
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import React, {Component} from 'react';
import styles from './Home.css';
import TodoInput from './TodoInput';
import TweetStream from './TweetStream'
import TweetFeed from './TweetFeed'
import * as TodoActions from '../actions/todo';
import * as TwitterActions from '../actions/twitter';


class Home extends Component {
  render() {
    console.log(this.props)
    return (
      <div>
        <TweetStream tweets={this.props.tweets} actions={this.props.tweet_actions}/>
        <TweetFeed query={this.props.todos.query} tweets={this.props.tweets} todos={this.props.todos} actions={this.props.tweet_actions}/>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return state;
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions, dispatch),
    tweet_actions: bindActionCreators(TwitterActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

当新数据到达流时，如何更新React中的组件？

0 个答案: