Question

我有一个渲染子组件的组件。子组件管理自己的状态，我试图使用回调将更新后的状态传递给父组件，但没有成功。我已经尝试了几个小时来确定问题，但一直无法弄清楚。我的父组件是这样的（没有导入）：

const formReducer = (state, action) => {
  switch (action.type) {
    case 'SET_CATEGORY':
      return {
        category: action.category
      };

    default:
      return state;  
  }
};


function LogService() {
  
   const initialFormState = 
   {
    category: ''   
   };

   const [formState, dispatch] = useReducer(formReducer, initialFormState);

   const getCategoryState = useCallback(category => {
    dispatch({
      action: 'SET_CATEGORY',
      category: category
    }, []);
  } 
  );

    
  
  const submitHandler = event => {
    event.preventDefault();    
    console.log(formState);      
  };  
    
   
  return (

    <>
      <form onSubmit={submitHandler}>        
        <CategoryOne sendState={getCategoryState} />        
        <button>send</button>
      </form>    
    </>

  );

};

export default LogService;

这是我的子组件：

const selectionReducer = (state, action) => {
  switch (action.type) {
    case 'DISPLAY_SELECTION':
      return {
        ...state,
        selectionIsVisible: true
      };
    case 'LOG_SELECTION':
      return {
        ...state,
        category: action.category,
        selectionIsVisible: false        
      }  

    default:
      return state;  
  }
};

function CategoryOne(props) {
  
    
  const [selectionState, dispatch] = useReducer(selectionReducer, {});

  
  const { category } = selectionState;
  const { sendState } = props;
  
  
  useEffect(() => {
    sendState(category);    
  }, [category, sendState])  
  
  const displaySelectionHandler = event => {
    dispatch({
      type: 'DISPLAY_SELECTION'
    });
  };

  const selectCategoryHandler = event => {
    dispatch({
      type: 'LOG_SELECTION',
      category: event.target.id
    });
    
  };

    
  return (
    <>
      <div className="container">          
        <div className={`options-container ${selectionState.selectionIsVisible && 'active'}`}>          
          <div className="option">
            <input className="radio" type="radio" id="One" name="category"  onChange={selectCategoryHandler} />
            
          </div>
          <div className="option">
            <input className="radio" type="radio" id="Two" name="category" onChange={selectCategoryHandler} />
            
          </div>
          <div className="option">
            <input className="radio" type="radio" id="Three" name="category" onChange={selectCategoryHandler} />
            
          </div>
          <div className="option">
            <input className="radio" type="radio" id="Four" name="category" onChange={selectCategoryHandler} />
            
          </div>
        </div>
        <div className="selected" id="category" onClick={displaySelectionHandler}>
          Category
        </div>
      </div>
    </>
  );  
  
};

export default CategoryOne;

我没有收到错误，只是一个警告：

React Hook useCallback does nothing when called with only one argument. Did you forget to pass an array of dependencies?

我不明白那个警告，我确实有一系列依赖项。除此之外， selectionIsVisible: true （在 'DISPLAY_SELECTION' 操作中）有效，但 selectionIsVisible: false （在 'LOG_SELECTION' 操作中）。

有人可以帮我吗？我很沮丧。

Answer 1

因为使用把[]放错了地方。就这样更新：

  const getCategoryState = useCallback((category) => {
    dispatch({
      action: "SET_CATEGORY",
      category: category,
    });
  }, []);

子组件未在 React.js 功能组件中更新父组件的状态

1 个答案: