1

一般来说，我对 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)
    });
}

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

4

1 回答 1

0

做 4 行 useState 或 useReducer (local)

我建议初始状态是这样的

  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;
于 2020-03-14T12:29:13.077 回答