Reactjs 如何删除：警告：上的'settaskstatus'属性值无效<；span>；标签

我创建了自己的组件，如下所示：

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;

import React，{Component，Fragment}来自'React'；
从“@material ui/core/Checkbox”导入复选框；
从“clsx”导入clsx；
从'@material ui/core/styles'导入{makeStyles}；
函数样式复选框（道具）{
const classes=useStyles（）；
让我来命名；
如果（！道具状态）{
iconClassName=classes.undoneIcon；
}否则如果（props.status==1）{
iconClassName=classes.inProgressIcon；
}否则如果（props.status==2）{
iconClassName=classes.checkedIcon；
}否则如果（props.status==3）{
iconClassName=“TaskStatusCheckBoxCancelled”；
}
返回(
{
props.settaskstatus（props.message）
}}
/>
);
}
导出默认样式复选框；

因此，如上所示，我需要传递在onChange eventListener中调用的函数settaskstatus。 这在react中很简单，这里是前面显示的组件标记

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

但现在我得到了这个错误

backend.js:6警告：上的prop

settaskstatus

的值无效 标签。从元素中删除它，或者传递字符串或数字 值将其保留在DOM中。有关详细信息，请参阅 www.fb.me/react-attribute-behavior 范围内（由ForwardRef（按钮库）创建） 在ForwardRef（按钮库）（由WithStyles（ForwardRef（按钮库））创建）

---

我认为问题可能是您正在将{…props}传递给

，而

props

此时包含

settaskstatus

，这是一个自定义属性

尝试删除它，然后向下传递{…rest}

---

尝试将道具分解为

rest

对象和

settaskstatus

如下：

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";
    }
    // See here:
    const {settaskstatus, ...rest} = props;
    // End see here :) 
    return (
        <Checkbox
            className={classes.root + " checklistTaskStyledCheckbox"}
            checkedIcon={<span className={clsx(classes.icon, iconClassName)} />}
            color="default"
            icon={<span className={iconClassName} />}
            {...rest}
            onChange={() => {
                settaskstatus(props.message)
            }}
        />
    );
}
export default StyledCheckbox;

import React，{Component，Fragment}来自'React'；
从“@material ui/core/Checkbox”导入复选框；
从“clsx”导入clsx；
从'@material ui/core/styles'导入{makeStyles}；
函数样式复选框（道具）{
const classes=useStyles（）；
让我来命名；
如果（！道具状态）{
iconClassName=classes.undoneIcon；
}否则如果（props.status==1）{
iconClassName=classes.inProgressIcon；
}否则如果（props.status==2）{
iconClassName=classes.checkedIcon；
}否则如果（props.status==3）{
iconClassName=“TaskStatusCheckBoxCancelled”；
}
//请看这里：
const{settaskstatus，…rest}=props；
//结束（请参见此处：）
返回(
{
settaskstatus（道具消息）
}}
/>
);
}
导出默认样式复选框；