React js 和 Redux :对象不能作为 React 子项使用

Question

action;

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

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

未捕获错误：对象作为 React 子项无效(找到：对象 带键 {文本}(。

和

组件中发生上述错误：

问题就在这里：

<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

也许您可以将initalState更改为将操作有效负载分散在文本数组中的对象，如下所示：

const initalState = { text: [] };

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

Answer 3

很可能是更新状态时化简器的问题。请检查状态和 action.payload.text 的值，另外，尝试使用初始状态作为对象而不是数组，以便轻松访问键。 在您的情况下，状态中的键可能是发件人和文本。

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

action.payload= {text："msg2"，sender："user"}; 确保有效负载文本的操作与上面的值类似。

最后，像下面提到的那样合并它们。这将向文本数组添加新的 msg，而不是每次都覆盖 msg。

var newState = {"text"：Object.assign({}，state.text，action.payload(};

您还需要更新 jsx 中的 array.map。

Answer 4

您正在尝试将数组呈现为 react 子级(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>
))}