Javascript 属性在 React 中用作默认状态时显示未定义

Question

我通过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;
}

请问我该如何解决这个问题？

Answer 1

使用useState(initialState)，initialState 将是初始渲染上的值。

在初始渲染期间，返回的状态（state）与作为第一个参数（initialState）传递的值相同。

因为你获取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]);