组件未使用 useEffects 呈现

Question

我在 React 应用程序的组件中有几个复选框，但每当我检查它们时，它们都无法正常工作！

每当我单击 ColumnCheckBoxes 组件 中的任何复选框时，它都会附加到 selectedColumns 中，但 selectedColumns 不会使用 DuplicateCheckBoxes 显示组件.

selectedColumn 和 duplicateColumn 是状态位于 useEffect 中，因此一旦它们更改整个页面需要重新渲染。

在后端，我想传递 selectedColumn 的列表以及 duplicateColumn（唯一属性将在将数据插入 SQL 时应用于列）
App.js

import { useEffect, useState } from 'react';
import ColumnCheckBoxes from './Components/CheckBoxes/ColumnCheckBoxes';
import DuplicateCheckBoxes from './Components/CheckBoxes/DuplicateCheckBoxes';

const App = () => {

  const [columns,setColumns]=useState([]);
  const [selectedColumn,setSelectedColumn] = useState([]);
  const [duplicateColumn, setDuplicateColumn]=useState([]);

  // componentDidMount
  useEffect(() => {
    console.log('Initial Rendering!');
    setColumns(['A','B','C','D']);
  },[]);

  // componentDidUpdate
  useEffect(() => {
    console.log('Selected Column',selectedColumn);
    console.log('Duplicate Columns',duplicateColumn);
  },[selectedColumn,duplicateColumn]);

  return (
    <div className='flex-col justify-center align-middle'>
      <div><ColumnCheckBoxes columns={columns} selectedColumn={selectedColumn} setSelectedColumn={setSelectedColumn}/></div>
      <div><DuplicateCheckBoxes selectedColumn={selectedColumn} duplicateColumn={duplicateColumn} setDuplicateColumn={setDuplicateColumn}/></div>
    </div>
  );
}

export default App;

列复选框

import React from 'react'

const ColumnCheckBoxes = ({columns, selectedColumn, setSelectedColumn}) => {

    const handleChange = (event,header) => {
        event.preventDefault();
        if(!(event.target.checked)) return;
        const localarr = selectedColumn;
        localarr.push(header.header);
        setSelectedColumn(localarr);
    }

  return (
    <div className='flex flex-col justify-center align-middle'>
        <h1>Columns :</h1>
        {columns.map ((header) => {
            return <div key={0} className='flex'>
                <label className='ml-2'>{header}</label>
                <input type='checkbox' className='ml-2' 
                    checked={header.header in selectedColumn?true:false} 
                    onChange={(e) => handleChange(e,{header})}
                />
            </div>
        })}
    </div>
  )
}

export default ColumnCheckBoxes;

重复复选框

import React from 'react';

const DuplicateCheckBoxes = ({selectedColumn, duplicateColumn, setDuplicateColumn}) => {

    const handleChange = (event,header) => {
        event.preventDefault();
        if(!(event.target.checked)) return;
        const localarr = duplicateColumn;
        localarr.push(header.header);
        setDuplicateColumn(localarr);
    }

  return (
        <div className='flex flex-col justify-center align-middle'>
            {selectedColumn.length === 0 ? <div></div> : <h1>Remove Duplicate Elements From Column</h1>}
            {selectedColumn.map ((header) => {
                return <div key={0} className='flex'>
                    <label>{header}</label>
                    <input type='checkbox' className='ml-2' onChange={(e) => handleChange(e,{header})}/>
                </div>
            })}
        </div>
  )
}

export default DuplicateCheckBoxes;

Answer 1

而不是

const localarr = selectedColumn;
localarr.push(header.header);
setSelectedColumn(localarr);

这样做

setSelectedColumn(columns => [...columns,header.header])

localarr 是对 selectedColumn 或 duplicateColumn 的引用，所以我试图在没有状态更改方法的情况下更改状态！

组件未使用 useEffects 呈现

Component is not rendered using useEffects

reactjs

use-effect