Как избавиться от: Предупреждение: Недопустимое значение для prop `урегулирования ошибок в теге <span>

Question

Я создал свой собственный компонент, следующий:

import React, { Component, Fragment } from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';

function StyledCheckbox(props) {
    const classes = useStyles();
    let iconClassName;
    if (!props.status) {
        iconClassName = classes.undoneIcon;
    } else if (props.status == 1) {
        iconClassName = classes.inProgressIcon;
    } else if (props.status == 2) {
        iconClassName = classes.checkedIcon;
    } else if (props.status == 3) {
        iconClassName = "taskStatusCheckboxCANCELED";
    }
    return (
        <Checkbox
            className={classes.root + " checklistTaskStyledCheckbox"}
            checkedIcon={<span className={clsx(classes.icon, iconClassName)} />}
            color="default"
            icon={<span className={iconClassName} />}
            {...props}
            onChange={() => {
                props.settaskstatus(props.message)
            }}
        />
    );
}
export default StyledCheckbox;

Так, как показано выше, мне нужно передать функцию allocaskstatus, вызываемую в onChange eventListener. Раньше было просто реагировать, здесь показанная выше разметка компонента

                     <StyledCheckbox
                        status={this.state.status2}
                        message={this.props.message}
                        settaskstatus={this.setTaskStatus}
                     />

Но теперь я получаю эту ошибку

backend.js: 6 Предупреждение: недопустимое значение дляопора settaskstatus на теге. Либо удалите его из элемента, либо передайте строковое или числовое значение, чтобы сохранить его в DOM. Для получения дополнительной информации см. Www.fb.me/react-attribute-behavior в диапазоне (создан ForwardRef (ButtonBase)) в ForwardRef (ButtonBase) (создан WithStyles (ForwardRef (ButtonBase)))

Answer 1

Я думаю, что проблема может заключаться в том, что вы передаете {... props} в <Checkbox />, а props в этот момент включает в себя settaskstatus, который является пользовательским атрибутом.

Попробуйте удалить его и затем передать {... rest} вниз.

https://reactjs.org/warnings/unknown-prop.html