reactjs - React hooks，从 prop 声明多个状态值

Question

总的来说，我对 React 和 React hooks 还很陌生，

我正在为我的最终项目构建一个 React 应用程序，我想使一些组件(本例中的高级搜索)尽可能通用，这意味着我想传递“dataFields”并且应该使用唯一的更新组件源自这些数据字段的状态值。

我知道我可以使用一般状态并使用数组在其中存储更改，但我读到这是不好的做法。

这是我现在拥有的:

const [title,updateTitle] = useState({"enable":false,"value": "" });
const [tags,updateTags] = useState({"enable":false,"value": "" });
const [owner,updateOwner] = useState({"enable":false,"value": "" });
const [desc,updateDesc] = useState({"enable":false,"value": "" });

我尝试用它来实现同样的事情:

if(props?.dataFields) {
    Object.entries(props.dataFields).forEach ( ([key,value]) => {
        // declare state fields
        const [key,value] = useState(value)
    });
}

正确的做法是什么？有吗？

Answer 1

执行 4 行 useState 或 useReducer(本地)

我建议初始状态是这样的

  const setItem = (enable = false, value = '') => ({ enable, value });

  const [title, updateTitle] = useState(setItem());
  const [tags, updateTags] = useState(setItem());
  const [owner, updateOwner] = useState(setItem());
  const [desc, updateDesc] = useState(setItem());

您还可以使用 Reducer 并定义初始状态。

我为 useReducer 和 case dor 改变 title.value 添加了一个例子

import React from 'react';
import { useReducer } from 'react';

const setItem = (enable = false, value = '') => ({ enable, value });

const initialState = { title: setItem(), tags: setItem(), owner: setItem(), desc: setItem() };

function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_TITLE':
      return { ...state, title: setItem(null, action.payload) };
    default:
      return state;
  }
}

function MyFirstUseReducer() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const updateTitle = ev => {
    if (ev.which !== 13 || ev.target.value === '') return;
    dispatch({ type: 'CHANGE_TITLE', payload: ev.target.value });
    ev.target.value = '';
  };

  return (
    <>
      <h2>Using Reducer</h2>
      <input type="text" onKeyUp={updateTitle} placeholder="Change Title" />
      <div>
        <span>The State Title is: <strong>{state.title.value}</strong></span>
      </div>
    </>
  );
}

export default MyFirstUseReducer;