如何从子组件反应钩子中仅更改 state 的一部分

Question

我的父组件像这样拥有 state

 const [formData,setFormData]=useState({
        Basics:{
            job_title:'',
            job_type:null,
            ppo:true,
            emp_type:null,
            start_date_month:null,
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
        Details:{},
        Preferences:{},
        Colleges:{}
    })

我将整个 state 的Basics object 作为道具传递给子组件。 但是，我只希望子组件能够更改Basics object 而不是整个 state 如果我直接通过setFormData这是不可能的

<Basics state={formData.Basics} setState={setFormData}/>

有没有办法我可以只将setFormData的一部分传递给孩子，这样它就不能修改formData的其他属性？

Answer 1

您可以创建一个单独的 function 仅更新该部分，并传递该 function 而不是 setFormData：

const setBasics = value => setFormData({
  ...formData,
  Basics: value
});

<Basics state={formData.Basics} setState={setBasics} />

您可以通过将要更新的属性作为参数传递来进一步概括这个想法：

const updateSection = (section, value) => setFormData({
  ...formData,
  [section]: value
});

<Basics
  state={formData.Basics}
  setState={(value) => updateSection('Basics', value)}
/>

Answer 2

当然。 这里它使用Reducer 示例：

import React from 'react';

const intialList = {
        Basics:{
            job_title:'',
            job_type:null,
            ppo:true,
            emp_type:null,
            start_date_month:null,
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
        Details:{},
        Preferences:{},
        Colleges:{}
    }
const formReducer = (state,action) => {
    switch (action.type) {
    case 'UPDATE_BASICS':
      return {...state,Basics:{
        ...state.Basics,...action.data
      }};
    case 'UNDO_TODO':
      return state.map(todo => {
        if (todo.id === action.id) {
          return { ...todo, complete: false };
        } else {
          return todo;
        }
      });
    default:
      return state;
  }
}

const App = () => {
  const [form, dispatch] = React.useReducer(
    formReducer,
    intialList
  );

  const updateBasicsInfo = _ => {
    dispatch({
      type: "UPDATE_BASICS",
      //You can set your form object its just dummy data
      data: {
            job_title:'Test' + Math.random(),
            job_type:"test",
            ppo:true,
            emp_type:"test",
            start_date_month:"test",
            start_date_year:null,
            end_date_month:null,
            end_date_year:null
        },
    });
  };

  return <>
  <div>
    Current job tiltle:{form.Basics.job_title}
  </div>
  //just dummy functionality to use reducer
  <button onClick={updateBasicsInfo}>
    Update job detail
  </button>
  </>
}

export default App;

这是演示： https://stackblitz.com/edit/react-nfvktg

注意：它只更新基本字段而不是任何其他字段！