Реагировать на хуки, объявляя несколько значений состояния из проп - PullRequest
Новая
       25

Реагировать на хуки, объявляя несколько значений состояния из проп

0 голосов
/ 14 марта 2020

Я довольно плохо знаком с перехватчиками 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)
    });
}

как правильно это сделать? есть один?

1 Ответ

0 голосов
/ 14 марта 2020

Делать 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 для изменения 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;
...