首页 文章

UI未更新react＆redux

提问于
浏览 次
3

我是react和redux的初学者，我有动作在API上发布JSON然后接收列表，这个动作从按钮点击调用，这个过程很好但是在填充数据之后ui没有更新

行动：

import * as types from './actionTypes'
import { postMessage } from '../api/messaging'

function postToAPI(msg, dispatch) {
  dispatch({ type: types.MESSAGE_POSTING });

  postMessage(msg, (messages) => {
    dispatch({
      type: types.MESSAGE_POST_DONE,
      messages: messages
    });
  });
}

export function postMessageAction(msg) {
  return (dispatch) => {
    postToAPI(msg, dispatch);
  }
}

减速器：

import * as types from '../actions/actionTypes'

const initialState = {
  messages: []
}

export default function messages(state = initialState, action) {
  switch(action.type) {
    case types.MESSAGE_POST_DONE:
      return {
        ...state,
        messages: action.messages
      }
      this.forceUpdate();
    default:
      return state;
  }
}

主要容器：

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <CounterApp />
      </Provider>
    );
  }
}

CounterApp：

class CounterApp extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { state, actions } = this.props;
    return (
      <Messaging />
    );
  }
}

export default connect(state => ({
  messages: state.default.messages.messages
}))(CounterApp);

消息：

class Messaging extends Component {
  render() {
    return (
      <View>
        <MessageList messages={this.props.messages} />
        <Message />
      </View>
    )
  }
}
export default connect(state => ({
  messages: state.default.messages.messages
}))(Messaging);

消息列表：

export default class MessageList extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ScrollView>
        {
          this.props.messages.map((item, index) => {
            return (
              <Text>
                { item.body }
              </Text>
              )
          })
        }
      </ScrollView>
    )
  }
}

enter image description here

消息更改时，我的MessageList组件不会更新 . 我读了道具和州之间的区别，但我不知道如何将数据传递给州 .

更新：

我在消息传递连接中的状态看起来像我使用默认的原因

enter image description here

有任何想法吗？

javascript reactjs react-native redux

3 回答

  • 1

    你的代码看起来很奇怪首先，您只需要在一个组件“Messaging”中连接到redux

    import { Component, PropTypes } from 'react';
import { connect } from 'react-redux';

const mapStateToProps = state => ({
  messages: state.messages.messages
});
@connect(mapStateToProps);

class Messaging extends Component {
  static propTypes = {
    messages: PropTypes.object
  }
  render() {
    const { messages } = this.props;
    return (
      <View>
        <MessageList messages={messages} />
        <Message />
      </View>
    )
  }
}

    然后使用MessageList之类的dumb组件来接收和呈现数据 .

    export default class MessageList extends Component {
    constructor(props) {
      super(props);
    }

    renderMessages(item, index) {
      return <Text>{item.body}</Text>;
    }

   render() {
     const { messages } =  this.props;

     return (
       <ScrollView>
        {messages.map((item, index) => this.renderMessages(item, index))}
      </ScrollView>
    );
  }
}
    回复于
  • 1

    猜测我会说你的连接声明想成为

    messages: state.messages

    而不是

    messages: state.default.messages.messages.

    从我所看到的，我认为你不需要在CounterApp中使用connect语句，它没有做任何事情 .

    我不确定返回的消息是应该替换还是与现有消息合并，但是你的reducer应该是

    case types.MESSAGE_POST_DONE:
  return {
    messages: action.messages
  }

    如果它正在取代现有的清单或

    case types.MESSAGE_POST_DONE:
  return {
    messages: [...state.messages, ...action.messages]
  }

    如果你想合并它们 .

    回复于
  • 1

    我注意到的一些事情是：

    • 从我所看到的状态中没有 default 对象（你写了 messages: state.default.messages.messages ） .

    • 您不应在减速机中使用 forceUpdate() .

    • 虽然它不会破坏任何东西，但 CounterApp 组件使用 connect 而不使用任何道具 .

    试试这个：

    减速器：

    import * as types from '../actions/actionTypes'

const initialState = {
  messages: []
}

export default function messages(state = initialState, action) {
  switch(action.type) {
    case types.MESSAGE_POST_DONE:
      return {
        ...state,
        messages: action.messages
      }
    default:
      return state;
  }
}

    CounterApp：

    class CounterApp extends Component {
  render() {
    return (
      <Messaging />
    );
  }
}

    消息：

    class Messaging extends Component {
  render() {
    return (
      <View>
        <MessageList messages={this.props.messages} />
        <Message />
      </View>
    )
  }
}

export default connect(state => ({
  messages: state.messages.messages
}))(Messaging);
    回复于

相关问题