Javascript 如何更改React钩子中提供程序的值

我目前有这个使用上下文和备忘录挂钩API的实践代码

下面是一段代码片段

export const InputContext = createContext()

export const ParentProvider = ({ initialValues, children }) => {
    console.log(initialValues)
    const [values, setValues ] = useState(initialValues);
    const value = {
        values,
        setValues
    }
    return <InputContext.Provider value={value}>{children}</InputContext.Provider>
}

export const InputContext=createContext（）
export const ParentProvider=（{initialValues，children}）=>{
console.log（初始值）
const[values，setValues]=useState（初始值）；
常量值={
价值观
设定值
}
返回{children}
}

我想要的是在单击“编辑”后，使用上下文API更新保存指示器的数组的值

---

问题是，使用

useContext

通过备忘录访问后，我无法访问上下文。您需要传递整个

上下文

对象（不仅仅是

消费者

）。就像这样使用它

const Component = () =>{
    const context = useContext(InputContext)
    const { values, setValues } = context

    const handleChange = () => setValues('foo')        

    return(
        <>
            {values}
            <button onClick={handleChange}>Change</button>
        </>
    )
}

const组件=（）=>{
const context=useContext（InputContext）
const{values，setValues}=context
常量handleChange=（）=>setValues（'foo'）
返回(
{values}
改变
)
}

使用

useContext

您需要传递整个

上下文

对象（不仅仅是

消费者

）。就像这样使用它

const Component = () =>{
    const context = useContext(InputContext)
    const { values, setValues } = context

    const handleChange = () => setValues('foo')        

    return(
        <>
            {values}
            <button onClick={handleChange}>Change</button>
        </>
    )
}

const组件=（）=>{
const context=useContext（InputContext）
const{values，setValues}=context
常量handleChange=（）=>setValues（'foo'）
返回(
{values}
改变
)
}

您需要使用提供程序包装所有需要访问上下文的组件。像这样的

---

ParentProvider.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

import React，{createContext，useState}来自“React”；
常量初始状态=[]；
export const InputContext=createContext（初始状态）；
导出常量ParentProvider=（{children}）=>{
const[values，setValues]=使用状态（初始状态）；
React.useffect（（）=>{
log（“[parentprovider.js]：：新值”，值）；
}，[价值]；
返回(
{儿童}
);
};

---

ShowIndicator.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

import React，{memo，useContext，useState}来自“React”；
从“react bootstrap”导入{Button}；
从“/ParentProvider”导入{InputContext}；
const ShowIndicator=备忘录(
（{name，context}）=>{
const[_name，_setName]=useState（name）；
const[text，setText]=useState（）；
const{values，setValues}=useContext（InputContext）；
const editData=e=>{
让newValues=[…值]；
newValues[values.indexOf（_name）]=文本；
设置值（新值）；
_设置名称（文本）；
};
const handleTextChange=e=>setText（e.target.value）；
常量renderDatas=（）=>{
返回(
编辑
删除
);
};
返回{renderDatas（）}；
},
（上一个，下一个）=>prev.value===next.value
);
导出默认显示指示器；

---

App.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

import React，{useState，useContext}来自“React”；
导入“/styles.css”；
从“react bootstrap”导入{Form，Button，Container}；
从“/ShowIndicator”导入ShowIndicator；
从“/ParentProvider”导入{InputContext}；
函数App（）{
const[curText，setCurText]=useState（“”）；
const{values，setValues}=useContext（InputContext）；
const onSubmit=e=>{
e、 预防默认值（）；
如果（！values.includes（curText））{
值？设置值（[…值，CurtText]）：设置值（[CurtText]）；
setCurText（“”）；
}
};
const onChange=e=>setCurText（e.target.value）；
返回(
添加指示器
提交
{值&&
value.map（（数据、索引）=>{
返回；
})}
);
}
导出默认应用程序；

---

index.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

从“React”导入React；
从“/App”导入应用程序；
从“react dom”导入{render}；
从“/ParentProvider”导入{ParentProvider}；
渲染(
,
document.getElementById（“根”）
);

您需要使用提供程序包装所有需要访问上下文的组件。像这样的

---

ParentProvider.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

import React，{createContext，useState}来自“React”；
常量初始状态=[]；
export const InputContext=createContext（初始状态）；
导出常量ParentProvider=（{children}）=>{
const[values，setValues]=使用状态（初始状态）；
React.useffect（（）=>{
log（“[parentprovider.js]：：新值”，值）；
}，[价值]；
返回(
{儿童}
);
};

---

ShowIndicator.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

import React，{memo，useContext，useState}来自“React”；
从“react bootstrap”导入{Button}；
从“/ParentProvider”导入{InputContext}；
const ShowIndicator=备忘录(
（{name，context}）=>{
const[_name，_setName]=useState（name）；
const[text，setText]=useState（）；
const{values，setValues}=useContext（InputContext）；
const editData=e=>{
让newValues=[…值]；
newValues[values.indexOf（_name）]=文本；
设置值（新值）；
_设置名称（文本）；
};
const handleTextChange=e=>setText（e.target.value）；
常量renderDatas=（）=>{
返回(
编辑
删除
);
};
返回{renderDatas（）}；
},
（上一个，下一个）=>prev.value===next.value
);
导出默认显示指示器；

---

App.js

import React, { createContext, useState } from "react";

const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);

export const ParentProvider = ({ children }) => {
  const [values, setValues] = useState(INITIAL_STATE);

  React.useEffect(() => {
    console.log("[parentprovider.js]::new values", values);
  }, [values]);

  return (
    <InputContext.Provider value={{ values, setValues }}>
      {children}
    </InputContext.Provider>
  );
};

import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";

const ShowIndicator = memo(
  ({ name, context }) => {
    const [_name, _setName] = useState(name);
    const [text, setText] = useState();
    const { values, setValues } = useContext(InputContext);

    const editData = e => {
      let newValues = [...values];
      newValues[values.indexOf(_name)] = text;
      setValues(newValues);
      _setName(text);
    };

    const handleTextChange = e => setText(e.target.value);

    const renderDatas = () => {
      return (
        <div key={_name} className="d-flex justify-content-between">
          <input
            className="d-flex align-items-center"
            defaultValue={_name}
            onChange={handleTextChange}
          />
          <div>
            <Button
              variant="info"
              style={{ marginRight: "10px" }}
              onClick={editData}
            >
              Edit
            </Button>
            <Button variant="dark">Delete</Button>
          </div>
        </div>
      );
    };

    return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
  },
  (prev, next) => prev.value === next.value
);

export default ShowIndicator;

import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";

function App() {
  const [curText, setCurText] = useState("");
  const { values, setValues } = useContext(InputContext);

  const onSubmit = e => {
    e.preventDefault();
    if (!values.includes(curText)) {
      values ? setValues([...values, curText]) : setValues([curText]);
      setCurText("");
    }
  };

  const onChange = e => setCurText(e.target.value);

  return (
    <div>
      <Container style={{ marginTop: "10px", textAlign: "center" }}>
        <div>Add Indicator</div>
        <Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
          <Form.Control
            style={{ flex: "1 0 0" }}
            onChange={onChange}
            value={curText}
          />
          <Button type="submit" variant="success">
            Submit
          </Button>
        </Form>
        {values &&
          values.map((data, index) => {
            return <ShowIndicator key={index} name={data} />;
          })}
      </Container>
    </div>
  );
}

export default App;

import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";

render(
  <ParentProvider>
    <App />
  </ParentProvider>,
  document.getElementById("root")
);

import React，{useState，useContext}来自“React”；
导入“/styles.css”；
从“react bootstrap”导入{Form，Button，Container}；
从“/ShowIndicator”导入ShowIndicator；
从“/ParentProvider”导入{InputContext}；
函数App（）{
const[curText，setCurText]=useState（“”）；
常量{values，setValues}=useCo