如何解构存储为状态值的对象

Question

在 React App 组件中，我调用 API 并将响应存储在本地状态中。然后我想解构存储在该状态下的对象，但我不能在 useEffect 的正下方解构，因为它会在调用完成之前抛出错误。

此外，我不想分解 useEffect 中的对象，因为我想要其他事物的整个响应。

这是一个例子：

const MyComponent = () => {

  const [calledObj, setCalledObj] = useState({})

  useEffect(() => {
    //Calling API here and setting object response as calledObj State
    setCalledObj(apiResponse)
  }, []);

  //This will throw an error when the API response has not been sent back yet.//
  // While this would be easy to write the whole path in the return, the actual path is really long.//
  const { name } = calledObj.person

  return (<div>{name}</div>)
}

在哪里可以解构或如何解决这个问题？

Answer 1

根据您希望 name 变量在首次渲染时默认设置的内容，我想您可以这样做：

  const { name } = calledObj.person ? calledObj.person : {name: ''}

Answer 2

您可以使用 optional chaining and/or the nullish coelescing operator 解决它。

注意：IE 不支持 either of these，但 babel 会填充它们。

const { name } = calledObj?.person ?? {};

可选的链接（calledObj?.person 中的 ?.）防止它在 calledObj 未定义时爆炸。
无效合并运算符 (??) returns {} 如果 calledObj.person 不存在。

通过这种组合，右侧可以保证评估为一个对象，因此左侧的解构永远不会失败。

let calledObject; // undefined;

// name is undefined, but it doesn't blow up.
const { name: name1 } = calledObject?.person ?? {};

console.log(`name 1: ${name1}`); // name 1: undefined

// ----------------

// now it's an object, but doesn't have a person property
calledObject = {};

// name is still undefined, still doesn't blow up.
const { name: name2 } = calledObject?.person ?? {};

console.log(`name 2: ${name2}`); // name 1: undefined

// ----------------

// with person.name present…
calledObject.person = { name: 'joe' };

const { name: name3 } = calledObject?.person ?? {};

// …it works as you'd expect
console.log(`name 3: ${name3}`); // name 3: 'joe'

Answer 3

您可以使用以下方式初始化您的状态：

const [calledObj, setCalledObj] = useState({person: {}})

这会将 undefined 放入 'name' 但不会破坏您的代码。

如何解构存储为状态值的对象

How to destructure an object that is stored as a state value

javascript

state

destructuring

reactjs