Question

因此，我设置了一个上下文，该上下文基本上是从api获取的，并将该值设置为需要在5-10个屏幕之间共享的状态。上下文是这样的

import React from 'react';
import PropTypes from 'prop-types';

const initialState = {
  data: [],
  findResults: () => { },
};
const Context = React.createContext(initialState);

function Context({ children }) {
  const [data, updateData] = React.useState([]);

  React.useEffect(() => {
    fetch('https://....', {
      method: 'GET',
    })
      .then((response) => response.json())
      .then((data) => updateData(data));
  }, []);

  return (
    <Context.Provider
      value={{
        data,
        findResults,
      }} >
      {children}
    </Context.Provider>
  );
}

ContextProvider.propTypes = {
  children: PropTypes.any,
};

export {
  ContextProvider,
  ContextContext,
};

现在，需要在5-10个不同的屏幕上访问数据。

状态（数组）用于呈现单选按钮列表。选定的值会从数组中过滤掉，状态下需要更新一个新数组，而不是旧数组。

问题来了。由于状态是全局的，因此对其进行的任何更新都会触发与其共享的所有组件的列表中的重新渲染和选择。

我尝试在每个组件中都使用useEffect作为componentDidMount来建立内部状态，但是由于数据最初是[]，因此无法正常工作。

选择操作会将列表中的值减小一个

如果我点击组件A 中的橙色选择，

- Apple (1)
- Orange (2)
- Watermelon (3)

它应在组件A 中反映为

- Apple (1)
- Orange (1)
- Watermelon (3)

并且组件B ， C ， D 应该获取更新的值

- Apple (1)
- Orange (1)
- Watermelon (3)

现在，如果我在橙色上的组件B 上进行选择，则它应在组件B上反映为以下内容

- Apple (1)
- Orange (0)
- Watermelon (3)

但，它应与组件A

上的相同

- Apple (1)
- Orange (1)
- Watermelon (3)

如何在响应中退订上下文状态并将其私有化为组件状态？

0 个答案: