Javascript свойство отображается undefined при использовании в качестве состояния по умолчанию в React - PullRequest
Новая
       124

Javascript свойство отображается undefined при использовании в качестве состояния по умолчанию в React

1 голос
/ 27 мая 2020

Я получил некоторый контент через useEffect, который будет использоваться в качестве состояния по умолчанию в моем приложении. См. Код ниже: 

const id = props.match.params.id;
const classes = UseStyles();
const dispatch = useDispatch();

useEffect(() => dispatch(fetchCategories()), []);
const categories = useSelector((state) => state).generalReducer.category;

useEffect(() => dispatch(fetchBusinessDetail(id)), []);
const business = useSelector((state) => state).generalReducer.businessDetail;
console.log(business);

console.log(business.name);
let defaultState = {
  name: business.name,
  description: business.description,
  url: business.url,
  phone: business.phone,
  address: business.address,
  category_id: [],
  email: business.email,
  image: "",
};

const [formState, setFormState] = useState(defaultState);
console.log(formState);

console.log(business) и console.log(business.name) дали ожидаемые результаты, однако console.log(formState) дает неопределенные значения, например: 

{
  // ...
  image: "";
  name: undefined;
  phone: undefined;
  url: undefined;
}

Как мне исправить это, пожалуйста ?

1 Ответ

1 голос
/ 27 мая 2020

Используя useState(initialState), initialState будет значением начального рендеринга .

Во время начального рендеринга возвращаемое состояние (состояние) совпадает со значением, переданным в качестве первого аргумента (initialState).

Потому что вы извлекаете the defaultState, его начальное значение - это то, что вы получаете из redux store : 

// business values are values from redux store
let defaultState = {name: business.name, description: business.description, url:business.url, phone:business.phone, address: business.address, category_id: [], email:business.email, image:''  };

Обычно вы обновляете состояние после того, как закончили выборку : 

const businessSelector = state => state.generalReducer.businessDetail;

const business = useSelector(businessSelector);

// Fetch and update `business` above.
useEffect(() => dispatch(fetchBusinessDetail(id)), []);

// `business` get new values and update the form.
useEffect(() => {
  setFormState(business);
}, [business]);
...