自定义 Api 响应并稍后在其他 React 组件上使用它

Question

我来自 Angular 背景，刚开始使用 React.js。这个问题对你们来说可能很容易，但是在架构方面，我需要一个好的解决方案。

从 API 获得 json 响应后，我想修改响应，然后将其保存在某个地方，这样我就可以在多个组件上使用修改后的响应。 （Json 修改不是问题，我想知道，存储响应的最佳解决方案是什么，然后在哪里修改响应，然后在哪里存储以便其他组件可以使用它的修改版本。我不是使用 redux。)

例如，如果我从 axios api 得到以下响应

{
  "name":"John",
  "age":30,
  "cars": [
    { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
    { "name":"BMW", "models":[ "320", "X3", "X5" ] },
    { "name":"Fiat", "models":[ "500", "Panda" ] }
  ]
 }

我想先修改一下

{
  "name":"John",
  "age":30,
  "cars": [
    { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] },
    { "name":"BMW", "models":[ "320", "X3", "X5" ] },
    { "name":"Fiat", "models":[ "500", "Panda" ] }
  ],
  "newparameter": [
    { "name":"fdf" }
    
  ]
 }

修改后，我想将其保存为任何服务或其他内容。所以我可以稍后在其他组件上使用它，而不管组件之间没有关系。

Answer 1

Json 修改不是问题，我想知道，存储响应的最佳解决方案是什么，然后在哪里修改响应，然后在哪里存储，以便其他组件可以使用它的修改版本。我没有使用 redux

你可以提升状态，使用状态管理器（redux）或反应上下文，这里是一个上下文的例子

const DataContext = React.createContext();
const DataProvider = ({ children }) => {
  const [dataResult, setDataResult] = React.useState({
    loading: true, //not using error as well
  });
  //fetch the data when the application loads
  React.useEffect(() => {
    setTimeout(
      () =>
        setDataResult({ loading: false, data: [1, 2, 3] }),
      2000
    );
  }, []);
  return (
    <DataContext.Provider value={dataResult}>
      {children}
    </DataContext.Provider>
  );
};

const data = ['a', 'b', 'c', 'd'];
function App() {
  const { loading, data } = React.useContext(DataContext);
  return (
    <div>
      {loading ? (
        'loading'
      ) : (
        <pre>{JSON.stringify(data, undefined, 2)}</pre>
      )}
    </div>
  );
}

ReactDOM.render(
  <DataProvider>
    <App />
  </DataProvider>,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>


<div id="root"></div>