Как установить объект, переданный через реквизит, в локальное состояние хуков - PullRequest
Новая
       14

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

0 голосов
/ 28 апреля 2019

Пропущенные реквизиты установлены в состояние, но не могут получить доступ к внутренним свойствам

прошла модель следующим образом 

let v = {
    "id": "6ccd12a3-802b-4ff6-ab6d-0f66f9df1e99",
    "mac": "a4:5e:60:f2:89:bf"
}

Я вызываю модель следующим образом 

<VisitorModal visitor={v}/>

модель здесь

импорт React, {useState, useEffect} из 'реакции'; import {Modal, Form, Button} из 'semantic-ui-реакции'; 

const VisitorModal = ({ visitor }) => {

    const [ state, setState ] = useState({
        modalOpen: false,
        v: visitor,
    });

    const handleOnChange = (e) => {
        console.log(e.target.name);
        console.log(e.target.value);
        state[e.target.name] = e.target.value;
    }

    useEffect(() => {
        setState(prevState => ({
            ...prevState,
            v: visitor
        }));
      }, [visitor]);

    return (
        <Modal trigger={<Button onClick={ () => setState({ modalOpen: true }) }> View/Edit Visitor </Button>} centered={false}
                open={state.modalOpen}
                onClose={ () => setState({modalOpen: false}) }
                // closeOnEscape={closeOnEscape}
                // closeOnDimmerClick={closeOnDimmerClick}
            >
            {JSON.stringify(state)}
            {/* {JSON.stringify(state)} */}
                <Modal.Header> View/Edit Visitor </Modal.Header>
                <Modal.Content image>
                    {/* <Image wrapped size='medium' src='/images/avatar/large/rachel.png' /> */}
                    <Modal.Description>
                        {/* <Header>Default Profile Image</Header> */}
                        <Form>
                            <Form.Group widths="equal">
                                <Form.Input label="MAC" placeholder="mac" value={state.v.mac} onChange={handleOnChange} />
                                <Form.Input label="Name" placeholder="Name" value={state.v.name} onChange={handleOnChange} />
                            </Form.Group>
                            <Form.Group>
                                <Form.Button >Save</Form.Button>
                                {/* <Form.Button disabled={!state.orgName}>Save</Form.Button> */}
                                <Form.Button onClick={() => setState({ modalOpen: false })}>Cancel</Form.Button>
                            </Form.Group>
                        </Form>
                    </Modal.Description>
                    {/* <button >click</button> */}

                </Modal.Content>
            </Modal>
    )
}

export default VisitorModal;

error is TypeError: Cannot read property 'mac' of undefined

1 Ответ

1 голос
/ 28 апреля 2019

Причина в том, что вы не устанавливаете значение для v ни в своем начальном объекте состояния, ни в ваших обработчиках событий.useState() не объединяет значения объектов, а перезаписывает их.Поэтому у вас есть два варианта: использовать useReducer или использовать отдельные объекты состояния для modalOpen и v.

Это должно исправить это, используя последний параметр, если вы соответствующим образом обновите свой метод render(): 

const VisitorModal = ({ visitor }) => {
  const [ modalOpen, setModalOpen ] = useState(false);
  const [ v, setV ] = useState(visitor);

  // Update `v` when the visitor prop changes.
  useEffect(() => {
    setV(visitor);
  }, [visitor]);
  const handleChange = e => setV({ ...v, [e.target.name]: e.target.value });
  return (
       <Form.Input label="MAC" placeholder="mac" value={v.mac} onChange={handleChange} />
  );
}

Теперь ваши обработчики событий могут независимо ссылаться на setV() и setModalOpen().

...