ReactJS - 在箭头 function 中设置 state

Question

I'm trying to figure out how to set the initial state in my React app inside an arrow function. I've found the example here: https://reactjs.org/docs/hooks-state.html but it's not helping me a lot. I want to put tempOrders and cols into the state so my other components have access to them and can change them.

Here is my code:

// 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;

Now my other related question is if I don't pass in those 4 variables/functions into Schedule , ESLint complains to me about them being unused variables in the 2 const lines above. I wouldn't think I would need to pass them in because that is the whole point of state, you just have access to them without needing to pass them around.

Answer 1

You should always keep the state at the top-level component where it needs to be accessed. In this case you should define the state in the Schedule -Component since it's not used anywhere else.

If you have a more complex hierachy of components and want to create a shared state (or make a state globally accessible) I would suggest following thump rule:

1. For small to medium sized apps use the context -API with the useContext -hook ( https://reactjs.org/docs/hooks-reference.html#usecontext ). It's fairly enough for most cases.
2. For large apps use redux . Redux needs a lot of boilerplate and adds complexity to your app (especially with typescript), which is often not required for smaller apps. Keep in mind that redux is not a replacement for the context -API. They work well in conjunction and can/should be used together.

EDIT

Simple example for 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;

You can now use the context in any component which is a child of the <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 (...) 
}

Note that you could als provide the context inside the <Schedule> -component instead of <App> . I wrote this from my head, but it should work. At least you should get the idea.

Answer 2

it seems you want the child component "Schedule" have to change the father's state...... is correct?

so you can try to write like this example:

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

Where my Test would work as your Schedule