React Native:保持同一组件的多个实例彼此同步

Question

我正在学习这门Udemy课程，该课程涉及按需订餐应用程序的开发。到目前为止，我很喜欢这门课，只是老师在整个课程中都做出了一些有问题的决定；无数其他人和我10多年的行业经验告诉我，永远不要做的事情。

其中一个例子是他复制了一个React Native PaperSearchbar组件，该组件将在两个单独的React Navigation屏幕中使用。这违反了DRY原则，我认为DRY原则是编程中最重要的设计原则之一。

他对这种重复的理由是，与另一个实例相比，他在组件的一个实例中进行了一些小的样式更改。但IMHO，这些分歧可以用一种更优雅的方式来处理。

到目前为止，我得到的是：

// search.component.js
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components/native';
import { Searchbar } from 'react-native-paper';
import { LocationContext } from '../../services/location/location.context';
const SearchBar = () => {
const { searchQuery, location, error, setError, searchLocations } = useContext(LocationContext);
const [lastSearch, setLastSearch] = useState('San Francisco');
const [currentSearch, setCurrentSearch] = useState(searchQuery);
// As an aside, I'd like to know if there's a better way to do this too!
useEffect(() => {
!error && setLastSearch(currentSearch);
}, [location]); // eslint-disable-line react-hooks/exhaustive-deps
return (
<Searchbar
placeholder="Search for a location..."
value={error ? lastSearch : currentSearch}
onChangeText={newSearch => {
setCurrentSearch(newSearch);
setError(null);
}}
onSubmitEditing={() => searchLocations(currentSearch)}
/>
);
};
// restaurant.search.component.js
const RestaurantSearchContainer = styled.View`
padding: ${props => props.theme.spacing.md};
`;
export const RestaurantSearch = () => (
<RestaurantSearchContainer>
<Search />
</RestaurantSearchContainer>
);
// map.search.component.js
const MapSearchContainer = styled.View`
padding: ${props => props.theme.space[3]};
position: absolute;
top: ${props => props.theme.space[4]};
width: 100%;
z-index: 1;
`;
export const MapSearch = () => (
<MapSearchContainer>
<SearchBar />
</MapSearchContainer>
);

LocationContext除了从JSON文件加载一些模拟位置数据外，不做太多ATM操作，但它最终将使用Google Places API来提供特定区域内餐馆的数据。RestaurantSearch是Restaurants屏幕上的搜索栏，而MapSearch是完全相同的组件，但在Map屏幕上，因此风格有点不同，正如您所看到的。

IMHO使用这种继承模式使代码更加干净和可维护——这就是DRY原则的全部目的，也是它如此重要的原因。但我不知道当用户在Restaurants屏幕上搜索时，如何告诉React重新渲染地图，反之亦然。

任何关于这方面的指导，包括如何进一步改进代码的提示，都将不胜感激：-(

Answer 1

没关系，在转到课程的另一个功能并进行了一些更改之后，它现在突然开始工作了！我总是讨厌虫子像这样神奇地消失，因为它们很可能会在某个时候回来。。。但现在我可以走了。无论如何都要感谢：-(