9장 메시지 전송 에러 문의

[jungahzzzang]

안녕하세요. 441p까지 했는데 메시지 전송이 안 되고 아래와 같은 에러 메시지가 뜹니다ㅠㅠ
그리고 로그아웃 버튼도 빨간색으로 변경이 되지 않습니다ㅠㅠ 이유 알 수 있을까요...?
제 깃허브 주소 함께 첨부하겠습니다. 감사합니다.

https://github.com/jungahzzzang/PJ_ReactNativeStudy/tree/main/JA/react-native-simple-chat

import React, {useState, useEffect, useLayoutEffect, useContext} from "react";
import styled, {ThemeContext} from "styled-components";
// import { Text, FlatList } from "react-native";
import { app, createMessage, getCurrentUser } from "../utils/firebase";
import { getFirestore, collection, onSnapshot, query, doc, orderBy } from "firebase/firestore";
// import { Input } from "../components";
import { Alert } from "react-native";
import {GiftedChat, Send} from 'react-native-gifted-chat';
import {MaterialIcons} from '@expo/vector-icons';

const Container = styled.View`
    flex: 1;
    background-color: ${({theme}) => theme.background};
`;

const SendButton = props => {
    const theme = useContext(ThemeContext);

    return(
        <Send
        {...props}
        disabled={!props.text}
        containerStyle={{
            width: 44,
            height: 44,
            alignItems: 'center',
            justifyContent: 'center',
            marginHorizontal: 4,
        }}
        >
            <MaterialIcons
                name="send"
                size={24}
                color={
                    props.text ? theme.sendButtonActivate : theme.sendButtonInactivate
                }
            />
        </Send>
    );
};

const Channel = ({navigation, route}) => {

    const theme = useContext(ThemeContext);
    const [messages, setMessages] = useState([]);
    const {uid, name, photoUrl} = getCurrentUser();
    
    const db = getFirestore(app);
    useEffect(() => {
        const docRef = doc(db, 'channels', route.params.id);
        const collectionQuery = query(
            collection(db, `${docRef.path}/messages`),
            orderBy('createdAt', 'desc')
        );

        const unsubscribe = onSnapshot(collectionQuery, snapshot => {
            const list = [];
            snapshot.forEach(doc => {
                list.push(doc.data());
            });
            setMessages(list);
        });
        return () => unsubscribe();
    }, []);

    useLayoutEffect(() => {
        navigation.setOptions({ headerTitle: route.params.title || 'Channel' });
    }, []);

    const _handleMessageSend = async messageList => {
        const newMessage = messageList[0];
        try{
            await createMessage({channelId: params.id, message: newMessage});
        }catch(e){
            Alert.alert('Send Message Error', e.message);
        }
    };

    return(
        <Container>
            {/* <Text style={{ fontSize:24 }}>Channel</Text> */}
            {/* <Text style={{fontSize: 24}}>ID : {route.params?.id}</Text>
            <Text style={{fontSize: 24}}>Title : {route.params?.title}</Text> */}
            {/* <FlatList
                keyExtractor={item => item[id]}
                data={messages}
                renderItem={({item}) => (
                    <Text style={{fontSize: 24}}>{item.text}</Text>
                )}
            />
            <Input
                value={messages}
                onChangeText={messages => setMessages(messages)}
                onSubmitEditing={()=>createMessage({channelId: params.id, messages})}
            /> */}
            <GiftedChat
                listViewProps={{
                    style: {backgroundColor: theme.background},
                }}
                placeholder="Enter a message..."
                messages={messages}
                user={{_id: uid, name, avatar: photoUrl}}
                onSend={_handleMessageSend}
                alwaysShowSend={true}
                textInputProps={{
                    autoCapitalize: 'none',
                    autoCorrect: false,
                    textContentType: 'none',    //iOS only
                    underlineColorAndroid: 'transparent',   //Android only
                }}
                multiline={false}
                renderUsernameOnMessage={true}
                scrollToBottom={true}
                renderSend={props => <SendButton {...props} />}
            />
        </Container>
    );
};

export default Channel;

[Alchemist85K]

안녕하세요 @jungahzzzang

오타가 있네요

screens/Channel.js 파일에 _handleMessageSend 함수

    try {
-      await createMessage({ channelId: params.id, message: newMessage });
+      await createMessage({ channelId: route.params.id, message: newMessage });
    } 

components/Button.js

  return (
    <Container
-      styled={containerStyle}
+      style={containerStyle}
      onPress={onPress}
      isFilled={isFilled}
      disabled={disabled}
    >

첫 번째 실패 메시지를 보면 params 변수를 찾을 수 없다고 나타납니다. 따라서, 어딘가 params 변수를 사용하는 코드가 있고 params가 선언되지 않았다는 뜻이니 해당 코드를 찾으면 됩니다.
두 번째 버튼 색은 동작은 잘 하지만 색만 문제가 되고 있으니 스타일 적용 부분을 확인하면 됩니다.

차분하게 문제가 발생하는 부분의 코드를 확인하면 오타를 찾을 수 있습니다.
급하게 하기 보다는 차분하게 진행하고, 책의 내용 혹은 책 깃헙 코드 를 다운받아 비교하며 확인해 보세요

[jungahzzzang]

오타였군요ㅠㅠㅠ 정말 감사합니다!!해결했습니다.