从类切换到功能组件，并且在状态更改后不会进行渲染。告诉我有什么问题。
它在课堂上的工作方式：
name.forEach(function(elem) {
if (checkDelAvailability(array2, elem) === true) {
for (let i = 0, len = array2.length; i < len; i++) {
if (array2[i] === elem) {
array2.splice(i, 1);
break;
}
}
}
});
this.setState({
opNames: array2,
});如何在函数中不起作用：
name.forEach(function(elem) {
if (checkDelAvailability(array2, elem) === true) {
for (let i = 0, len = array2.length; i < len; i++) {
if (array2[i] === elem) {
array2.splice(i, 1);
break;
}
}
}
setOpNames(array2);
});整个组件：
function MassViewer (props) {
const [checkInput, setCheckInput] = useState('');
const [opNames, setOpNames] = useState(["name1", "name2", "name3"]);
function AddBrand (name) {
let array = opNames;
function checkAvailability(array, name) {
return array.some(function(arrVal) {
return name === arrVal;
});
}
if (checkAvailability(array, name) === false) {
setOpNames([...opNames, name]);
} else {
setCheckInput('Такое название уже есть');
}
}
function ElementList({opNames}) {
console.log(opNames);
return opNames.map((name) => (
console.log(name),
<Operator key={name} brand={name}/>
));
}
function DeleteBrand (name) {
let array2 = opNames;
function checkDelAvailability(array2, elem) {
return array2.some(function(arrVal) {
return elem === arrVal;
});
}
name.forEach(function(elem) {
if (checkDelAvailability(array2, elem) === true) {
for (let i = 0, len = array2.length; i < len; i++) {
if (array2[i] === elem) {
array2.splice(i, 1);
break;
}
}
}
setOpNames(array2);
});
}
return (
<div>
<div>
<ElementList opNames={opNames} />
</div>
<div>
<AddOperator AddBrand={AddBrand} message={checkInput}/>
</div>
<div><DelOperator DeleteBrand={DeleteBrand} brand={opNames} /></div>
</div>
);
}开发者：
export function DelOperator (props) {
const [showModal, setShowModal] = useState(false);
const [name, setName] = useState([]);
const prevNameRef = useRef([]);
useEffect(() => {
prevNameRef.current = name;
});
function handleOpenModal () {
setShowModal(true);
}
function handleCloseModal () {
setShowModal(false);
}
function handleDeleteOp (e) {
e.preventDefault();
props.DeleteBrand(name);
}
function checkAvailability (array, name) {
return array.some(function(arrVal) {
return name === arrVal;
});
}
function checkListener (check, delOp) {
let names = name.slice();
const prevName = prevNameRef.current;
console.log('До цикла: ', check, names, delOp);
if (check === true) {
if (checkAvailability(names, delOp) === true) {
console.log('В цикле: ', check, names, delOp);
for (let i = 0, len = names.length; i < len; i++) {
if (names[i] === delOp) {
names.splice(i, 1);
break;
}
}
setName(names);
}
console.log('После цикла: ', check, names, delOp);
} else if (check === false) {
if (checkAvailability(names, delOp) === false) {
setName([...prevName, delOp]);
console.log('Вторая проверка: ', check, names, delOp);
}
} else {
console.log('каво')
}
}
function CheckboxList ({brand}) {
return brand.map((name) => (
<CheckboxDeleteOp key={name} brand={name} checkListener={checkListener}/>
));
}
return (
<div>
<a href="#"><span className="delOp" onClick={handleOpenModal}></span></a>
<Modal
closeTimeoutMS={500}
isOpen={showModal}
contentLabel="onRequestClose Example"
onRequestClose={handleCloseModal}
className="Modal"
overlayClassName="Overlay"
>
<form>
<label className="delOpLabel">
<CheckboxList brand={props.brand}/>
</label><br />
</form><br />
<button onClick={handleDeleteOp}>Удалить</button><br/><br/>
<button onClick={handleCloseModal}>Закрыть</button>
</Modal>
</div>
)
}复选框删除操作：
export function CheckboxDeleteOp (props) {
const [checked, setChecked] = useState(false);
const prevCheckedRef = useRef();
useEffect(() => {
prevCheckedRef.current = !checked;
});
function handleCheck () {
const prevChecked = prevCheckedRef.current;
setChecked(prevChecked);
props.checkListener(prevChecked, props.brand);
}
return (
<div>
<br/>
<div>
<input className="checkboxDeleteOp"
type="checkbox"
checked={checked}
onChange={handleCheck}/>
<div>{props.brand}</div>
</div>
</div>
)
}
如果 React 没有重新渲染元素，那么你就没有改变状态。最有可能的是，
DeleteBrand它接收一个空数组（名称）作为输入。查看您
DeleteBrand获得的输入和setOpNames安装的内容。请参阅下面的评论。