Как использовать функцию карты для хуков динамически использовать свойства состояния

Question

Мой вопрос почти такой же, как этот .

В этом случае у человека есть карта состояний, созданная жестко закодированным способом:

const App = props => {
  const [state, changeState] = useState({
    name: "",
    eventTitle: "",
    details: "",
    list: "",
    toggleIndex: "",
    editName: "",
    editEventTitle: "",
    editDetails: "",
  });

Разница в том, что я хочу динамически создавать эти состояния, получая их от другого компонента. Я пытался что-то вроде этого, но это, очевидно, не сработало:

const App = props => {
  const [state, changeState] = useState({
    props.inputs.map((input, i) =>
      input = ""
    )
  });

Знаете ли вы какое-либо решение для этого?

Answer 1

Вы можете сделать это, используя props.inputs непосредственно к состоянию, объедините его с reduce, чтобы создать новый объект из массива inputs:

const App = props => {
  const [state, changeState] = useState(
    props.inputs.reduce((acc, cur, arr) => ({
      [cur]: "",
      ...acc
    }), {})
  );

  return (
    <ul>
      {Object.entries(state).map(([name, value], index) => (
        <li key={`li-${index}`}><strong>{name}</strong>: {`"${value}"`}</li>
      ))}
    </ul>
  );
}

Если мы используем его следующим образом :

<App inputs={['name', 'details', 'list', 'editName']}/>

У нас будет такой результат:

editName: ""
list: ""
details: ""
name: ""

Вы можете проверить работающий Stackblitz здесь .

Answer 2

Предполагая, что props.input - это просто массив нужных вам ключей, вы можете заполнить объект состояния, просматривая массив и динамически назначая ключ объекта состояния с помощью []

const [state, changeState] = useState({});

useEffect(() => {
    props.input.forEach(item => changeState(prevState => ({...prevState, [item]: "" })));
}, [props.input])