时间戳

首页 > 解决方案 > ReactJS 上下文：通过上下文传递数组

reactjs - ReactJS 上下文：通过上下文传递数组

问题描述

我目前有一个项目，我需要将数组传递给我的搜索栏的另一个组件。我正在使用 React 的上下文。

我试过传递我的数据，但我似乎在我的控制台中得到了一个未定义的值。

Context.js中的代码

Export const SearchContext = createContext();

这是MainPage.js中的代码：

const data = [json_1, json_2];

const array = data.map(values => {
 const search = _.flattenDeep(values);
 values.search = search;
 return values;
})

<SearchContext.Provider value={array} />

在我的Searchbar.js

const options = useContext(SearchContext);

console.log(options);

<AutoComplete
                                className="searchbar"
                                placeholder="Search..."
                                dataSource = {options}
                                onfilterOption={(inputValue, option) =>
                                    option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                                  }
                        />

在 console.log 我得到一个未定义的值。这些数据也应该能够填充我的搜索栏。

标签： reactjsreact-hooksantdreact-context

解决方案

请看这个要点：https ://gist.github.com/nimahkh/9c008aaf2fd2d1cc83cd98c61e54979a


你必须用 Provider 包装你的组件，并且在那个被 Wrapped 的组件内部，你可以访问 value ，不可能获取 value ，开箱即用

推荐阅读