Question

一般来说，我对React和React钩子还是很陌生的

我正在为我的最终项目构建一个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添加了一个示例，并且大小写更改了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钩子，从prop声明多个状态值

1 个答案:

执行4行useState或useReducer（本地）