解决这个问题的一种方法是使用React的状态管理库，如Redux或Mobx，并结合React的表单组件来实现。

下面是一个示例代码，使用React和Redux来创建一个不重复复制组件的多字段搜索表单：

1. 创建一个名为SearchForm的组件，它包含多个字段的输入框和一个搜索按钮。

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { search } from './actions';

const SearchForm = () => {
  const [field1, setField1] = useState('');
  const [field2, setField2] = useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(search(field1, field2));
  };

  return (
    

       setField1(e.target.value)}
        placeholder="Field 1"
      />
       setField2(e.target.value)}
        placeholder="Field 2"
      />
      Search
    
  );
};

export default SearchForm;

2. 创建一个名为search的action，用于触发搜索操作。

// actions.js
export const SEARCH = 'SEARCH';

export const search = (field1, field2) => ({
  type: SEARCH,
  payload: {
    field1,
    field2,
  },
});

3. 创建一个名为reducer的reducer函数，用于处理搜索操作。

// reducer.js
import { SEARCH } from './actions';

const initialState = {
  field1: '',
  field2: '',
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SEARCH:
      return {
        ...state,
        field1: action.payload.field1,
        field2: action.payload.field2,
      };
    default:
      return state;
  }
};

export default reducer;

4. 在根组件中使用Redux的Provider组件，并将SearchForm组件包裹在其中。

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import SearchForm from './SearchForm';

const store = createStore(reducer);

const App = () => (
  
    
  
);

export default App;

这样，当用户在搜索表单中输入字段并点击搜索按钮时，SearchForm组件会触发search action，更新Redux store中的state。其他使用相同state的组件可以通过订阅store来获取最新的搜索字段值。