Warm tip: This article is reproduced from stackoverflow.com, please click
reactjs redux

React js and Redux : Objects are not valid as a React child

发布于 2020-04-04 10:12:39

action;

export const ON_MESSAGE = 'ON_MESSAGE';

export const sendMessage = (text, sender = 'user') => ({
  type: ON_MESSAGE,
  payload: { text, sender },
});

reducer:

import { ON_MESSAGE } from 'Redux/actions/Chat_action';
import { act } from 'react-dom/test-utils';

const initalState = [{ text: [] }];

const messageReducer = (state = initalState, action) => {
  switch (action.type) {
    case ON_MESSAGE:
      return [...state, action.payload];
    default:
      return state;
  }
};

export default messageReducer;

combine reducer:

import Chat from 'Redux/reducers/Chat_reducer';

export default combineReducers({
  Chat,
});

store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './rootReducer';

export default function configureStore(initialState) {
  return createStore(rootReducer, applyMiddleware(thunk));
}

and code:

const Chat = props => {
  const dispatch = useDispatch();
  const messages = useSelector(state => state.Chat);
  const [text, setText] = React.useState('');
  console.log(messages);
  return (
    <Styled.ChatBox>
      <Styled.ChatHeader>
        <p>Chat Bot</p>
        <div>
          <FontAwesomeIcon icon={faAngleDown} size="1x" color="white" />
          <FontAwesomeIcon icon={faTimes} size="1x" color="white" />
        </div>
      </Styled.ChatHeader>
      <Styled.ChatLog>
        {messages.map(message => (
          <Styled.ChatMessage>{message.text}</Styled.ChatMessage>
        ))}
      </Styled.ChatLog>
      <Styled.ChatInput>
        <textarea
          value={text}
          onChange={e => setText(e.target.value)}
          placeholder="Digite aqui sua mensagem"
        />
        <button onClick={() => dispatch(sendMessage({ text }))}>
          <FontAwesomeIcon icon={faPaperPlane} size="lg" color="black" />
        </button>
      </Styled.ChatInput>
    </Styled.ChatBox>
  );
};

basically my initial message appears normally in my chat body but when I type a message and use the dispatch I get the following errors:

Uncaught Error: Objects are not valid as a React child (found: object with keys {text}).

and

The above error occurred in the component:

the problem is here:

  <Styled.ChatLog>
    {messages.map(message => (
      <Styled.ChatMessage>{message.text}</Styled.ChatMessage>
    ))}
  </Styled.ChatLog>
Questioner
user12356906
Viewed
32
Craig Ayre 2020-01-31 23:12

The problem is that your action is expecting individual parameters but you are passing a single object

export const sendMessage = (text, sender = 'user') => ({
  type: ON_MESSAGE,
  payload: { text, sender },
});
dispatch(sendMessage({ text }))

Because of this, your reducer shape is actually [{ text: { text: "..." } }] instead of [{ text: "..." }]

This means that message.text is actually an object { text: '...' }, causing the error:

<Styled.ChatMessage>{message.text}</Styled.ChatMessage>

To fix this, you need to pass values as individual parameters to your action, like so:

dispatch(sendMessage(text))