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中定义状态。 - 组件，因为它没有在其他地方使用。

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

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> 中提供上下文-组件而不是 <App> 。 这是我脑子里写的，但它应该有效。至少你应该明白这个想法。