Javascript 状态集方法不影响主对象-ReactJS

我的项目中有三个组件，App、DataTable和Table

应用程序将呈现一个包含表组件的数据表。我刚刚用数据和列道具调用了DataTable

// data sample
const tmpData = [
    {
        name: "Can",
        age: 4,
    }, {
        name: "David",
        age: 44,
    }, {
        name: "Sara",
        age: 14,
    }, {
        name: "Hani",
        age: 24,
    }
]

// main columns array
const tmpColumns = [
    {
        title: "Name",
        accessor: "name",
    }, {
        title: "Age",
        accessor: "age",
    }
]

function App() {
    return (
        <div className="App" style={{background: "#f0f0f0", padding: "1rem"}}>
            <div>App Component:</div>

            <DataTable data={tmpData} columns={tmpColumns}/>
        </div>
    );
}

如上所述，为了处理行选择，我通过在列数组的第一个索引处添加一个新列来操作DataTable组件中的列。目前一切正常。但是，当我尝试选择一行时，select列的调用方法无法访问我的DataTable组件的选择数组状态。这是我的问题

实际上，在每次选择时，

选择

数组必须更新，目标复选框必须选中。显然，有一个

选项的副本发生了更改（或者可能没有更改）

您还可以在上检查整个项目。好的，您从
App
传递到
DataTable
的
tmpData
是只读的。因此，在设计过程中，您不会看到数据发生任何更改

有两种方法可以让它工作，主要是做一些事情，允许您的
DataTable
将更改传递回
App

步骤1，您可以在
数据表上添加一个名为
onrow的
prop
，单击

  <DataTable data={tmpData} onRowClick={row => { console.log(row) } />

当然，对于这种复杂的事情，我们通常使用
useReducer
而不是
useState
，因为除了选择行之外，您肯定还需要做其他事情：）
我对您的代码做了一些修复，请查看

其思想是，您不需要将列置于状态，而只需要使用选择框获取列

我还通过实现React.usemo来记忆计算的列，为它添加了一个简单的优化。只有当props.columns和选择状态更改时，才会重新计算

希望这有帮助！快乐编码！：）
 钩子的setSelection语法是错误的。设置值直接无更多功能call@Rikin，我不这么认为！即使我确实喜欢你的意思，更改的
选择
也无法在我的
单元格
方法中再次访问。我现在在文档中看到了它：我不知道这种回调模式，很高兴知道。感谢您指出。但是只有DataTable可以操作列进行筛选和选择。另外，我不需要像你说的那样更改tmpData。我想将所有选中的行都放入一个数组调用
selection
，在这种情况下，您需要将
selection
和
onSelectionChange
传递到
DataTable
，我的朋友，必须通过接口执行某些操作。当然，如果确定它们是
DataTable
的内部变量，则不必传递它们。这就是为什么有时称为
非受控组件的原因。
function Table(props) {

    const [data, setData] = useState(props.data)

    return (
        <div className="Table" style={{background: "#d5d5d5", padding: "1rem"}}>
            <div>Table</div>

            <table>
                <tbody>
                <tr>
                    {props.columns.map((th, key) => (
                        <th key={key}>{th.title}</th>
                    ))}
                </tr>

                {/* generating data rows */}
                {data.map((dr, key) => (
                    <tr key={key}>
                        {columns.map((col, index) => (
                            <td key={index}>
                                {
                                    // the "Cell" method has high priority than "accessor" selector
                                    (col.Cell && typeof col.Cell === "function") ?
                                        col.Cell(dr) :
                                        dr[col.accessor]
                                }
                            </td>
                        ))}
                    </tr>
                ))}
                </tbody>
            </table>

        </div>
    )
}

  <DataTable data={tmpData} onRowClick={row => { console.log(row) } />

  const [tmpData, setTmpData] = useState([sampleData])
  return (
    <DataTable data={tmpData} onRowClick={row => { 
      // use setTmpData to adjust the tmpData to get a new instance of tmpData
    } />
  )