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

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

对于中小型应用程序，请使用带有context钩（https://reactjs.org/docs/hooks-reference.html#usecontext）的useContext-API。在大多数情况下就足够了。
对于大型应用程序，请使用redux。 Redux需要很多样板，并增加了应用程序的复杂性（尤其是使用打字稿），而较小的应用程序通常不需要。请记住，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>。我从脑海写了这个，但是应该可以。至少您应该知道这个主意。

Answer 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

我的考试将在哪里作为您的时间表

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

2 个答案: