如何仅更改 child 组件反应钩子的一部分状态

Question

我的 parent 组件拥有这样的状态

 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:{}
    })

我将整个状态的 Basics object 作为 props 传递给 child 组件。但是，我只希望 child 组件能够更改 Basics object 而不是整个状态，如果我直接通过 setFormData[= 是不可能的18=]

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

有什么方法可以只将 setFormData 的一部分传递给 child，这样它就不能修改 formData 的其他属性？

Answer 1

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

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

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

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

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

注意：它只更新基础领域而不是任何其他领域！

如何仅更改 child 组件反应钩子的一部分状态

How to change only a part of the state from child component react hooks

javascript

reactjs

react-hooks

react-state

use-state