Передача параметра в компонент только для чтения ReactJs - PullRequest
Новая
       69

Передача параметра в компонент только для чтения ReactJs

0 голосов
/ 01 мая 2020

У меня есть следующий компонент для добавления комментариев во всплывающем окне. Я хотел передать машину компоненту, обновить некоторые значения, а затем всплывающее окно закрылось, и объект, который был передан от родителя, обновлен.

Когда я пытаюсь обновить объект автомобиля и попытаться инициализировать его как новый массив или обновить какие-либо элементы, я получаю сообщение об ошибке только для чтения

Вот мой код 

interface ICar
{
    id: string;
    comments: IComment[];
}

interface IComment
{
    name: string;
    comments: string;
}

const carComment = (car: ICar) => {
    const [comm, setComm] = useState<string>("");

    if (comm === "" && car.comments !== undefined && car.comments.length > 0) {
        setComm(car.comments[0].comment);
    }

    const handleSaveClick = () => {
        if (car.comments !== undefined && car.comments.length > 0) {
            car.comments[0].comment = comm;
        }
        else {
            car.comments = new Array<IComment>();
            car.comments.push({ comment: comm, name: "Peter" });
        }

        return (
        <>
            <TextField
                id="testMulti"
                label="Comment"
                multiline
                rows={4}
                defaultValue={comm}
                variant="outlined"
                key={1}
                onChange={e => {
                    setComm(e.target.value);
                }
                }
            />
            <Button onclick ="handleSaveClick"> Save </Button>
            </>
    }   
} 
export default CarComment;

1 Ответ

0 голосов
/ 04 мая 2020

В родительском я добавил 

const updateCar = (carComments: IComment[]) => {
...
};

<carComment id={props.id} comments={props.comments} updateCarCallback={updateCar}></carComment>

В дочернем Я добавил 

interface ICarCommentProps extends ICar {
    updateCarCallback(carComments: IComment[]): void;
}

and in the handleSaveClick i added 
updateCar(car.comments);
...