反应钩子：useState 嵌套其他 useState，setState 不起作用？

Question

我写了一个使用react useHooks动态添加文本的例子。并使用useState来嵌套。 但是，有一个问题，setState 不起作用？

当我点击文本时，组件中的setState没有生效（通常是在当前点击的文本上添加一个类并删除其他文本上的类），我该怎么办？

下面是具体的代码链接：

https://codesandbox.io/s/nifty-sky-z0p9w?file=/src/App.js

谢谢！

Answer 1

您代码中的问题是：

    const [activeItem, setActiveItem] = useState(null);

您正在App级别定义它。 并且您期望这将在TableCel中工作，而TableCel在另一个具有自己状态的组件中。

更好的方法是从App外部取出TableCel组件并在那里使用状态。 如果您需要在App内部使用，那么也将activeItems和setActiveItem作为道具传递。

这是代码：

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [activeItem, setActiveItem] = useState(null);

  const TableCel = (props) => {
    const { title } = props;

    return <div>{title}</div>;
  };
  const cell = [
    {
      key: 1,
      header: <TableCel id={1} title={"Header"} />,
      render: (cvm) => (
        <>
          <p>--</p>
        </>
      )
    },
    {
      key: 2,
      header: <TableCel id={2} title={"Header"} />,
      render: (cvm) => (
        <>
          <p>--</p>
        </>
      )
    },
    {
      key: 3,
      header: <TableCel id={3} title={"Header"} />,
      render: (cvm) => (
        <>
          <p>--</p>
        </>
      )
    },
    {
      key: 4,
      header: <TableCel id={4} title={"Header"} />,
      render: (cvm) => (
        <>
          <p>--</p>
        </>
      )
    },
    {
      key: 5,
      header: <TableCel id={5} title={"Header"} />,
      render: (cvm) => (
        <>
          <p>--</p>
        </>
      )
    }
  ];
  const [cellList, addCells] = useState(cell);

  const [count, setCount] = useState(6);

  // console.log(cellList);

  const addCell = (value) => {
    const _cell = {
      key: value,
      header: <TableCel title="Header" id={value} />,
      render: (cvm) => (
        <>
          <p>--</p>
        </>
      )
    };
    addCells([...cellList, _cell]);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button
        onClick={() => {
          setCount(count + 1);
          addCell(count + 1);
        }}
      >
        add li
      </button>
      <div>
        {cellList
          .filter((cell) => cell.key < 60)
          .map((filteredPerson, index) => (
            <li
              key={index}
              onClick={() => {
                setActiveItem(filteredPerson.key);
              }}
              className={filteredPerson.key === activeItem ? "cel-active" : ""}
            >
              {filteredPerson.header}
            </li>
          ))}
      </div>
    </div>
  );
}

这是演示： https : //codesandbox.io/s/morning-cookies-8eud6?file=/ src/App.js: 0-2086

Answer 2

它不起作用的原因是因为您正在访问函数内部的activeItem状态的值。 不建议访问函数内部的状态，因为即使状态已更新，它也将始终具有初始值。 这就是<TableCel>不重新渲染的原因，因为它不知道 activeItem 状态已经改变。

我建议您只访问useEffect() 、 useCallback() 、 useMemo()和组件的return语句内部的状态。

例如：

function App() {
  const [state, setState] = useState('initial Value')

  function someFunction(){
    // It's not recommended to access the state inside of this function
    // cause the value of the state will always be ('initial Value')
    // even if the state were updated
    console.log(state)
  }

  useEffect(()=>{
    // It's good if you access the value of the state here
    // It will be assured it will always have the updated value
    console.log(state)
  },[state]) 

  return (
    // You can also access the value of the state inside return statement        
    <>
    {console.log(state)}
    <SomeComponent props={state}/>
    </>
  )
}

解决方案：

使用上下文挂钩传递 activeItem 的状态。 这样 <TableCel> 将真正知道每次 activeItem 状态更改时。

在沙箱链接中查看此代码是否使用上下文挂钩来解决问题

https://codesandbox.io/s/quiet-star-zo4ej?file=/src/App.js