React Hooks (useState) 中的推送方法?

IT技术 javascript reactjs react-hooks
2021-02-09 20:58:44

如何将元素推送到 useState 数组 React 钩子中?这是作为react状态的旧方法吗?或者有什么新东西?

例如setState 推送示例

6个回答

使用时useState,可以获得状态项的更新方法:

const [theArray, setTheArray] = useState(initialArray);

然后,当您想要添加新元素时,您可以使用该函数并传入新数组或将创建新数组的函数。通常是后者,因为状态更新是异步的,有时是批处理的:

setTheArray(oldArray => [...oldArray, newElement]);

有时,如果您针对某些特定用户事件click例如(但不是 like mousemove))更新处理程序中的数组,则无需使用该回调形式就可以逃脱

setTheArray([...theArray, newElement]);

React 确保刷新渲染的事件是此处列出的“离散事件”

实时示例(将回调传递到setTheArray):

因为theArray那里的唯一更新click事件中的一个(“离散”事件之一),所以我可以直接更新addEntry

...setTheArray(currentArray => [...currentArray, newElement])如果上述方法不起作用,请尝试最有可能的是useEffect(...theArray..., []),重要的是要意识到这theArray是一个常数,因此未来渲染中的值需要进行功能更新
2021-03-21 20:58:44
如果useEffect有一个空的依赖列表[],它只会在第一次渲染期间执行。所以theArray效果里面的值永远是initialArray. setTheArray([...initialArray, newElement])没有意义的情况下,当theArray常数总是等于 时initialValue,则需要功能更新。
2021-03-22 20:58:44
嘿@TJCrowder,我在获取数据时使用回调方式将旧数据与新数据合并,但由于某种原因它不能正常工作,请您检查一下以了解我的问题吗?
2021-03-26 20:58:44
@Aprillion - 不太确定你在那个useEffect例子中说的是什么......?
2021-04-01 20:58:44
@Aprillion - 恐怕我还是没明白,可能有点密集。:-) 为什么你只需要初始数组值的效果(我的意思是,可能有一个不常见的用例,但是......)即使你这样做了,它与问题有什么关系?
2021-04-02 20:58:44

为了进一步扩展,这里有一些常见的例子。从...开始:

const [theArray, setTheArray] = useState(initialArray);
const [theObject, setTheObject] = useState(initialObject);

在数组末尾推送元素

setTheArray(prevArray => [...prevArray, newValue])

在对象末尾推送/更新元素

setTheObject(prevState => ({ ...prevState, currentOrNewKey: newValue}));

在对象数组的末尾推送/更新元素

setTheArray(prevState => [...prevState, {currentOrNewKey: newValue}]);

在数组对象的末尾推送元素

let specificArrayInObject = theObject.array.slice();
specificArrayInObject.push(newValue);
const newObj = { ...theObject, [event.target.name]: specificArrayInObject };
theObject(newObj);

这里也有一些工作示例。 https://codesandbox.io/s/reacthooks-push-r991u

使用 prevState 解决了我的问题,即只有最后一次调用被应用于同时进行的数组连接和过滤器。
2021-03-18 20:58:44
谢谢你所有的例子。我遇到的确切问题是数组对象末尾的 Push 元素我尝试了很多不同的东西,但就是无法拼凑起来。
2021-03-26 20:58:44

您可以在自定义状态的末尾附加数据数组:

  const [vehicleData, setVehicleData] = React.useState<any[]>([]);
  setVehicleData(old => [...old, ...newArrayData]);

例如,在下面,你会出现一个 axios 的例子:

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        {
          url: `http://localhost:4000/api/vehicle?page=${page + 1}&pageSize=10`,
          method: 'get',
        }
      );
      setVehicleData(old => [...old, ...result.data.data]);
    };

    fetchData();
  }, [page]);

最推荐的方法是一起使用包装函数和扩展运算符。例如,如果你初始化了一个name像这样调用的状态

const [names, setNames] = useState([])

你可以像这样推送到这个数组,

setNames(names => [...names, newName])

希望有帮助。

虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会无效。-来自评论
2021-03-29 20:58:44
请不要发布仅链接的答案。该链接将来可能会断开。相反,创建该文章的文章并确保实际回答问题。
2021-04-10 20:58:44

与在 React 类组件中使用“正常”状态执行此操作的方式相同。

例子:

function App() {
  const [state, setState] = useState([]);

  return (
    <div>
      <p>You clicked {state.join(" and ")}</p>
      //destructuring
      <button onClick={() => setState([...state, "again"])}>Click me</button>
      //old way
      <button onClick={() => setState(state.concat("again"))}>Click me</button>
    </div>
  );
}
这将适用于 onClick,但 setState(oldState => [...oldState, pushsomething]) 是你应该如何做的
2021-03-14 20:58:44