Question

我设置了这样的状态：

const [address, setAddress] = useState('');

我把这个对象放到了 setAddress 中：

{"street_number":"1","street":"Wheins","city":"Denmark"}

我想输出这样的数据：

address.street_number, address.street ...

但我没有定义。为什么？

Answer 1

要使用状态，根据您的用例，类似这样的事情可能会起作用：

...
const [address, setAddress] = useState('');

setAddress({"street_number":"1","street":"Wheins","city":"Denmark"});

return (
    <>
        <p>Address: {address.street_number}, {address.street}, {address.city}</p>
    </>
);
...

这完全取决于您尝试使用它的方式？这不在原始问题中。如果 setAddress 在回调中或在第一次渲染时可能不可用，因此您可能需要执行以下操作：

...
const [address, setAddress] = useState(false);

setAddress({"street_number":"1","street":"Wheins","city":"Denmark"});

return (
    <>
        {address && (<p>Address: {address.street_number}, {address.street}, {address.city}</p>)}
    </>
);

...

Answer 2

我认为您正在从 API 端点获得上述响应..

那么，

console.log(address["street_number"]) // this will output "1"

console.log(address["street"]) // this will output "Wheins"

是的，对于初始化状态，您应该使用对象，

像这样 -

const [address, setAddress] = useState({});

Answer 3

您可能正试图在您设置它的同一范围内访问地址状态。但是你应该等待重新渲染。所以这行不通：

setAddress({'street_number':'1', 'street':'Wheins', 'city':'Denmark'});
console.log('address.street_number:', address.street_number); // output: undefined

你可以使用 useEffect() 钩子来监听你状态的变化，然后开始使用它：

  useEffect(() => {

    console.log(address.street_number); // output: 1

  }, [address]);

反应原生未定义对象

3 个答案: