React js 和 Redux:对象作为 React 子对象无效 [英] React js and Redux : Objects are not valid as a React child

问题描述

动作；

export const ON_MESSAGE = 'ON_MESSAGE';export const sendMessage = (text, sender = 'user') =>({类型:ON_MESSAGE，有效载荷:{文本，发件人}，});

减速器:

import { ON_MESSAGE } from 'Redux/actions/Chat_action';从'react-dom/test-utils'导入{行为}；const initalState = [{ text: [] }];const messageReducer = (state = initalState, action) =>{开关(动作.类型){案例 ON_MESSAGE:返回 [...状态，动作.有效载荷];默认:返回状态；}};导出默认的 messageReducer；

组合减速器:

从'Redux/reducers/Chat_reducer'导入聊天；导出默认的 combineReducers({聊天，});

商店:

import { createStore, applyMiddleware } from 'redux';从redux-thunk"导入 thunk；从'./rootReducer'导入rootReducer；导出默认函数 configureStore(initialState) {返回 createStore(rootReducer, applyMiddleware(thunk));}

和代码:

const Chat = props =>{const dispatch = useDispatch();const 消息 = useSelector(state => state.Chat);const [text, setText] = React.useState('');控制台日志(消息)；返回 (<Styled.ChatBox><Styled.ChatHeader><p>聊天机器人</p><div><FontAwesomeIcon icon={faAngleDown} size="1x" color="white"/><FontAwesomeIcon icon={faTimes} size="1x" color="white"/>

</Styled.ChatHeader><Styled.ChatLog>{messages.map(message => (<Styled.ChatMessage>{message.text}</Styled.ChatMessage>))}</Styled.ChatLog><Styled.ChatInput><文本区域值={文本}onChange={e =>setText(e.target.value)}占位符="数字 aqui sua mensagem"/><button onClick={() =>dispatch(sendMessage({ text }))}><FontAwesomeIcon icon={faPaperPlane} size="lg" color="black"/></Styled.ChatInput></Styled.ChatBox>);};

基本上我的初始消息正常出现在我的聊天正文中但是当我输入消息并使用调度时，我收到以下错误:

<块引用>

未捕获的错误:对象作为 React 子对象无效(找到:对象使用键 {text}).

和

<块引用>

组件出现上述错误:

问题出在这里:

 {messages.map(message => (<Styled.ChatMessage>{message.text}</Styled.ChatMessage>))}</Styled.ChatLog>

解决方案

问题是您的操作需要单独的参数，但您传递的是单个对象

export const sendMessage = (text, sender = 'user') =>({类型:ON_MESSAGE，有效载荷:{文本，发件人}，});

dispatch(sendMessage({ text }))

因此，你的reducer形状实际上是[{ text: { text: "..." } }] 而不是[{ text: "..." }]

这意味着message.text实际上是一个对象{ text: '...' }，导致错误:

{message.text}

要解决此问题，您需要将值作为单独的参数传递给您的操作，如下所示:

dispatch(sendMessage(text))

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>

解决方案

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))

这篇关于React js 和 Redux:对象作为 React 子对象无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！