时间戳

首页 > 解决方案 > 反应 useContext setState 不是一个函数

javascript - 反应 useContext setState 不是一个函数

问题描述

我正在开发一个反应应用程序，我需要在我的全局状态中保留一组名称，就像这个文件一样：

import React from "react";
import { useState } from "react";

const initialState = {
  nameList: [],
  test: 'hello'
}

export const Context = React.createContext()

const Data = ({ children }) => {
  const [state, setState] = useState(initialState)

  return(
    <Context.Provider value={[state, setState]}>
      {children}
    </Context.Provider>
  )
}

export default Data

但是，当我尝试将“nameList”设置为另一个文件中的新值时：

const [state, setState] = useContext(Context);
const [currName, setCurrName] = useState('');

const handleAddName = () => {
  setState.nameList(prevState => [...prevState, currName])
}

我收到“setState.nameList 不是函数”错误，我找不到也无法理解原因，任何帮助将不胜感激

标签： javascriptreactjsreact-native

解决方案

您错误地更新了状态，以下是您的情况：

const handleAddName = () => {
    setState(prevState => ({
        ...prevState,
        nameList: [...prevState.nameList, currName]
    }))
}

这将确保状态更新不变。

setState.nameList是错误的，因为setState它是一个函数而不是一个对象，它会神奇地拥有你的状态键。

推荐阅读