标签: react-hooks

我正在尝试更改状态挂钩，但出现此错误...我知道另一种更改方法，但它应该适用于传播语法，对吗？

export default function App() {
  const [state, setState] = {
    sld_url: "",
    geojson_url: "",
  }

  const handleSldUrlChange = event => {
    setState({...state, sld_url: event.target.value})
  }

  return (
    <TextField
     label="SLD URL"
     value={state.sld_url}
     className={classes.textField}
     onChange={handleSldUrlChange}
     margin="normal"
     variant="outlined"
    />
  );
}

我第一次遇到的问题很少。我正在尝试使用一个简单的 useState，但出于某种原因，我无法理解为什么 React 会向我抛出错误以及我试图做的任何事情都没有解决它。

那是错误的图像：错误描述：

错误：无效的挂钩调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一而发生的： 1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能有多个 React 副本同一个应用

我的代码：（非常简单）

import React, {useState} from "react";

function Login() {
    const [user, setUser] = useState({});


  return <div> why error? </div>;
}
export default Login;

尝试遵循他们的解决方案但没有成功...谢谢

编辑：这是我渲染组件的地方 -

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./components/Home";
import Contact from "./components/Contact";
import Login from "./components/Login";
import Register from "./components/Register";
import NotFound from "./components/NotFound"; …

所以我这里有一些代码，它应该根据房产平方英尺和选择的包裹来计算价格。

当我像这样编写代码时，代码曾经与类组件一起使用......但我现在使用 react JS 和 Functional 组件。

我现在遇到的当前问题是让setBasePrice(1234);实际设置基本价格，以便它可以在函数中计算。

我也遇到了basePrice += basePrice * (percentage / 100);在功能组件中正常工作的问题。

我知道我现在完全错了，只是希望有人能指出我正确的方向，并可能告诉我如何清理我的代码。

更新

我添加了 useEffect 钩子，但总价出现错误。在 5500 平方英尺的价格应该是 272 美元，但出现了 112 美元。我的旧代码没有这样做，所以我不确定发生了什么。

类组件

 this.state = {
      propertySqft: "",
      packageSelected: this.props.location.state,
      totalPrice: null,
      basePrice: null
    };
  }

  checkPrice = () => { 
      debugger;
       if(this.state.packageSelected === "Photography"){
        this.state.basePrice = 159.998;
       }else if(this.state.packageSelected === "Video"){
            this.state.basePrice = 416.998;
       }else if(this.state.packageSelected === "Drone Aerial Photos Only"){
            this.state.basePrice = 199.998;
       }else if(this.state.packageSelected === "Drone Aerial Video Only"){ …

我目前在我的 React 项目中有一个提供者和上下文设置。上下文扩展了firebase。成分：

import React from 'react';

const FirebaseContext = React.createContext(null);

export const withFirebase = Component => props => (
  <FirebaseContext.Consumer>
    {firebase => <Component {...props} firebase={firebase} />}
  </FirebaseContext.Consumer>
)

export default FirebaseContext;

使用类组件，我可以像这样访问 firebase：

import { withFirebase } from "../components/Firebase";

我的出口是这样的：

export default withFirebase(Admin);

通过这种方式，我可以在我的组件（管理员）中访问this.props.firebase和执行。

我的问题是我有一个功能组件，它是 Admin 的孩子的孩子。管理 -> 子组件 -> 子组件（这是一个）

在这里，我使用与上面相同的导入 withFirebase 并将导出包装在 withFirebase()

const MinistriesAdminForm = props => {

  const [ministries, setMinistries ] = useState([]);

  useEffect(() => {
    this.props.firebase.getMinistries(this.state.currentOrganization).on("value", data => {
    const ministriesObject = …

我正在尝试将切换的状态存储在本地存储中，作为刷新时保留模式或类似内容的示例。

我已经在大多数情况下工作了，在第一页加载时，布尔值只是设置为空，这不会呈现<p>I'm toggled</p>标签，并且当您打开和关闭时，状态存储在我可以看到的本地存储中从我的开发工具中的“应用程序本地存储”选项卡。

我遇到的问题是，在初始页面加载时，如果您再次刷新页面，<p>I'm toggled</p>默认情况下会显示该标签......以及之后的每次刷新。切换仍然有效，但任何刷新都会默认返回显示的状态 - 它不应该。

有人能帮我理解为什么会这样吗？我已经尝试了几种变体，但似乎无法解决。

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  const [toggle, setToggle] = React.useState(localStorage.getItem('toggle'))

  React.useEffect(() => {
    localStorage.setItem('toggle', toggle)
  }, [toggle]);

  return (
    <div>
        <button onClick={() => {
            setToggle(!toggle)
        }}>
            Toggle
        </button>
        {toggle ? <p>I'm toggled</p> : null}
    </div>
  );
};

export default App;

ReactDOM.render(<App />, document.getElementById('root'));

我正在尝试在请求数据方法中为如下所示的字符串变量设置状态

const ViewChangeRequest = () => {
      const [requestStageValue, setRequestStage] = useState('');
      const { data: requestData, loading: requestDataLoading, error: requestDataError } = 
        useQuery(GET_SPECIFICREQUEST, {
          variables: { requestinputs: { id } },
      });

      if (requestData != null) {
setRequestStage(requestData.allRequests[0].requestStage.name); // getting error at here 
requestData.allRequests.map((code) => {
    requestDatasource.push({
        id: code.id,
        section: code.masterSection.name,
        createdBy: code.createdBy,
        type: code.requestType.name,
        status: code.requestStage.name,
        createat: code.createdAt,
    });
    return null;
  });
 } 
};
export default withRouter(ViewChangeRequest);

取决于 requeststage 值，我正在验证如下条件

 if (requestStageValue === 'Request Submitted') {
stepNumber = 0; …

我使用 Context API 来管理我的应用程序全局状态，我第一次尝试使用钩子来做到这一点……我在 async/await 方面遇到了一些麻烦，让我解释一下：

这是我的提供者：

const JobProvider = (props) => {
       const [modalOpen, setModalOpen] = useState(false)
       const [modalJob, setModalJob] = useState({})
       const [jobs, setJobs] = useState([])
       const [searchItem, setSearchItem] = useState('')
       const [page, setPage] = useState(1)
       const [now, setNow] = useState('')


       const handleSearchChange = (e) => {
           setSearchItem(e.target.value)
       }


     const getJob = id => {
        // bla bla bla 
        return something;
       };

// ... 

 }

在该 Provider 中，我有一个函数nextPage()，它只更新页码并在此之后返回它……这是具有该函数的 Provider：

const JobProvider = (props) => {
           const …

const [value, setValue] = useState(); 

预期的 ';' 代替“=”

我正在使用这个 npm 从带有国家代码的用户那里获取手机号码。

npm 我反应电话号码输入

https://www.npmjs.com/package/react-phone-number-input/v/3.0.13

这是他们使用的例子。

const [value, setValue] = useState(); 

请帮帮我。还建议我另一种可能的解决方案，以获取带有国家/地区代码的用户的电话号码。

根据文档：

当<MyContext.Provider>组件上方最近的更新时，此 Hook 将使用传递给该 MyContext 提供程序的最新上下文值触发重新渲染。即使祖先使用React.memoor shouldComponentUpdate，仍然会使用 useContext 从组件本身开始重新渲染。...当上下文值更改时，调用 useContext 的组件将始终重新渲染。

在我的 Gatsby JS 项目中，我将我的 Context 定义为：

上下文.js

import React from "react"

const defaultContextValue = {
  data: {
    filterBy: 'year',
    isOptionClicked: false,
    filterValue: ''
  },
  set: () => {},
}

const Context = React.createContext(defaultContextValue)

class ContextProviderComponent extends React.Component {
  constructor() {
    super()

    this.setData = this.setData.bind(this)
    this.state = {
      ...defaultContextValue,
      set: this.setData,
    }
  }

  setData(newData) {
    this.setState(state => ({
      data: {
        ...state.data,
        ...newData,
      }, …

以下是使用useState(). 除了+单击按钮时，它工作正常，然后数字可以在某些数字之间交替7001并7000快速闪烁。

实际上，不点击+，数字表现良好，但最多可达 8000 或 9000，然后它可能会开始在某些数字之间闪烁。为什么会这样，如何修复？

PS最初的调试发现是：它似乎Counter()被多次调用，每次都设置一个间隔计时器。所以“神奇地”，似乎useState()只运行了一次——出于某种未知和神奇的原因——或者它运行了不止一次，但每次都返回完全相同的内容，对于某种神奇的机制。0真的是第一次这样的初始值。当它useState(0)用于未来时，它count不是0......我们不希望那样，但它也不是那么实用（就像在数学函数中一样）。

function Counter() {
    const [count, setCount] = React.useState(0);

    setInterval(() => {
        setCount(count + 1000);
    }, 1000);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}> + </button>                    
            { count }
            <button onClick={() => setCount(count - 1)}> - </button> 
        </div>
    );
}

ReactDOM.render(<Counter />, document.querySelector("#root"));

button { margin: 0 1em } …