ReactJS - 在箭头函数中设置状态答案

【问题标题】：ReactJS - setting state in an arrow functionReactJS - 在箭头函数中设置状态
【发布时间】：2019-11-14 15:42:10
【问题描述】：

我正在尝试弄清楚如何在我的 React 应用程序中的箭头函数中设置初始状态。我在这里找到了这个例子：https://reactjs.org/docs/hooks-state.html 但这对我没有多大帮助。我想将tempOrders 和cols 放入状态，以便我的其他组件可以访问它们并可以更改它们。

这是我的代码：

// creating tempOrders array and cols array above this
const App = () => {
const [orders, setOrders] = useState(tempOrders);
const [columns, setColumns] = useState(cols);

return (
    <div className={'App'}>
        <Schedule
          orders={orders}
          setOrders={setOrders}
          columns={columns}
          setColumns={setColumns}
        />
    </div>
   );
 };

 export default App;

现在我的另一个相关问题是，如果我不将这 4 个变量/函数传递给 Schedule，ESLint 会向我抱怨它们是上面 2 个 const 行中未使用的变量。我认为我不需要传递它们，因为这就是状态的全部意义所在，您只需访问它们而无需传递它们。

【问题讨论】：

看来您对状态有误解。它是一个本地状态，如果你没有在这个组件中使用它，直接或向下传递它，它是未使用的。
它在箭头函数中的事实是无关紧要的。
话虽如此，尚不清楚您面临的问题是什么。
我认为 state 是您最初在顶级 App.js 中设置的内容，可以在任何组件中的任何位置使用。
有像 Redux 和 react-redux 这样的状态管理库来将状态绑定到组件。还有context in React，与您所描述的很接近。

标签： javascript reactjs state

【解决方案1】：

您应该始终将状态保留在需要访问的顶级组件中。在这种情况下，您应该在Schedule-Component 中定义状态，因为它没有在其他任何地方使用。

如果您有更复杂的组件层次结构并想要创建共享状态（或使状态全局可访问），我建议遵循 thump 规则：

对于中小型应用程序，请使用 context-API 和 useContext-hook (https://reactjs.org/docs/hooks-reference.html#usecontext)。对于大多数情况来说，这已经足够了。
对于大型应用程序，请使用redux。 Redux 需要大量样板文件并增加应用程序的复杂性（尤其是使用 typescript），而小型应用程序通常不需要这些。请记住，redux 不能替代context-API。它们可以很好地结合使用，可以/应该一起使用。

编辑

useContext 的简单示例：

ScheduleContext.js

import React from "react";

export const ScheduleContext = React.createContext();

App.jsx

import {ScheduleContext} from "./ScheduleContext";

const App = () => {
const [orders, setOrders] = useState(tempOrders);
const [columns, setColumns] = useState(cols);

const contextValue = {orders, setOrders, columsn, setColumns};

return (
    <div className={'App'}>
      <ScheduleContext.Provider value={contextValue}>
        <Schedule/>
      </ScheduleContext.Provider>
    </div>
   );
 };

 export default App;

您现在可以在任何属于<ScheduleContext.Provider> 子组件的组件中使用上下文。

Schedule.jsx

import React, {useContext} from "react";
import {ScheduleContext} from "./ScheduleContext";

const Schedule = () => {
const {orders, setOrders, columsn, setColumns} = useContext(ScheduleContext);

// now you can use it like
console.log(orders)

return (...) 
}

请注意，您也可以在<Schedule>-组件中提供上下文，而不是<App>。我从头上写了这个，但它应该工作。至少你应该明白了。

【讨论】：

我认为这是一个相当小的应用程序。我的日程安排有我想要存储在状态中的列组件。然后每个 Column 都有一个我想在 Columns 之间拖动的 Order 并将 columnID 和 sort order ID 保持在最终保存到 DB 的状态中。
我用一个例子编辑了我的帖子，这可能会让事情变得清晰。

【解决方案2】：

看来您希望子组件“Schedule”必须改变父亲的状态……对吗？

所以你可以试着写成这样的例子：

import React, {useState} from 'react';
import './App.css';

function Test(props){
    const{setCount,count}=props    
    return(
        <div>
        <h1>hello</h1>
        <button onClick={() => setCount(count + 1)}>
                Click me
        </button>
        </div>
    )
}


function App() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);
  return (
    <div>


      <Test
        setCount={setCount}
        count={count}
      />
      {count}
    </div>
  );
}
export default App;

https://repl.it/@matteo1976/ImperfectYawningQuotes

我的测试将作为您的日程安排的地方

【讨论】：