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

Question

我想弄清楚如何在箭头函数内设置我的 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 中未使用的变量> 上面的行。我认为我不需要传递它们，因为这是状态的全部要点，您只需访问它们而无需传递它们。

Answer 1

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

如果你有一个更复杂的组件层次结构并且想要创建一个共享状态(或使一个状态全局可访问)我建议遵循 thump 规则:

1. 对于中小型应用，请使用 context -API 与 useContext - Hook (https://reactjs.org/docs/hooks-reference.html#usecontext)。对于大多数情况来说，这已经足够了。
2. 对于大型应用，请使用 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> 中提供上下文-component 而不是 <App> .我从头开始写这个，但它应该有效。至少你应该明白了。