React js и Redux: объекты недопустимы как дочерние элементы React

Question

действие;

export const ON_MESSAGE = 'ON_MESSAGE';

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

Редуктор:

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;

Комбинированный редуктор:

import Chat from 'Redux/reducers/Chat_reducer';

export default combineReducers({
  Chat,
});

Хранение:

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

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

и код :

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

в основном мое первоначальное сообщение появляется нормально в теле чата, но когда я набираю сообщение и использую рассылку, я получаю следующие ошибки:

Uncaught Error: объекты недопустимо в качестве дочернего элемента React (найдено: объект с ключами {text}).

и

Произошла вышеуказанная ошибка в компоненте:

проблема здесь:

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

Answer 1

Проблема в том, что ваше действие ожидает отдельных параметров, но вы передаете один объект

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

dispatch(sendMessage({ text }))

Из-за этого ваша форма редуктора фактически равна [{ text: { text: "..." } }] вместо [{ text: "..." }]

Это означает, что message.text на самом деле является объектом { text: '...' }, вызывая ошибку:

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

Чтобы исправить это, вам нужно передать значения как отдельные параметры в ваше действие, например, так :

dispatch(sendMessage(text))

Answer 2

Скорее всего, проблема связана с редуктором при обновлении состояния. Пожалуйста, проверьте значение состояния и action.payload.text. Также попробуйте использовать начальное состояние в качестве объекта вместо массива, чтобы получить доступ к ключам. в легкой. В вашем случае ключи в состоянии могут быть отправителем и текстом.

var initialState = {text: ["msg1"]};

action.payload = {text: "msg2", отправитель : "пользователь"}; Убедитесь, что действие payload.text похоже на указанное выше значение.

И, наконец, объедините их, как указано ниже. Это добавит новое сообщение в массив текстов вместо того, чтобы переопределять сообщение каждый раз.

var newState = {"text": Object.assign ({}, state.text, action.payload)};

Вам также необходимо обновить файл array.map в вашем jsx.

Answer 3

Вы пытаетесь отобразить массив как реагирующий дочерний элемент (message.text является массивом):

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

Попробуйте это:

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

Answer 4

возможно, вы можете изменить initalState на объект, распределяющий полезную нагрузку действия внутри текстового массива, например:

const initalState = { text: [] };

return [...state, text: [...action.payload]];