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

Question

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

我正在为我的最终项目构建一个反应应用程序，我想使一些组件（本例中的高级搜索）尽可能通用，这意味着我想通过 "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 change 添加了一个例子 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;

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

React hooks, declaring multiple state values from prop

reactjs

react-props

react-hooks

use-state

执行 4 行 useState 或 useReducer（本地）