React组件中解决textarea显示[object Object]问题，仅渲染地址的街道、城市及邮政编码（排除Geo嵌套对象）

嘿，我明白你遇到的问题了——直接把地址对象塞到textarea里，JavaScript会默认把它转换成[object Object]，这肯定不是你想要的效果。咱们来一步步搞定它：

问题根源 #

你从API拿到的address是一个嵌套对象，里面包含street、city、zipcode和geo。当你在模板字符串里写${this.state.users.address}时，JS会把对象转成默认的字符串表示，也就是[object Object]。

解决方案 #

我们需要先把地址对象里的有效字段（street、city、zipcode）拼接成可读的字符串，再存入state，这样textarea就能正常显示了。

1. 修改API数据处理逻辑 #

在getOneUser函数里，拿到address对象后，提取需要的字段拼接成字符串：

async getOneUser(){ 
  try{ 
    const {id} = this.props.match.params; 
    const res = await fetch(`http://localhost:3003/users/${id}`); 
    if(!res.ok) throw new Error('could not fetch'); 
    const data = await res.json(); 
    const {name, address} = data; 
    // 拼接需要的地址字段，排除geo，同时处理可能的空字段
    const formattedAddress = [
      address.street,
      address.city,
      address.zipcode
    ].filter(Boolean).join(', '); // 过滤空值后用逗号分隔
    this.setState({users: {name, address: formattedAddress}}); 
  }catch(err){ 
    console.error(err.message); 
  } 
}

这里用数组filter(Boolean)自动去掉空字段，避免出现多余的逗号，比直接拼接更健壮。

2. 简化textarea的value属性 #

现在state里的address已经是字符串了，不需要再用模板字符串包裹：

render() { 
  return <div className="mb-3"> 
    <textarea 
      name='address' 
      value={this.state.users.address} 
      onChange={this.onChangeHandler} 
      className="form-control" 
      placeholder="Address" 
      id="floatingTextarea"
    /> 
  </div> 
}

可选：编辑后转回对象提交（如果需要） #

如果你之后需要把修改后的地址提交回API，得把字符串重新转成对象。可以在onSubmitHandler里做这件事：

onSubmitHandler(e){
  e.preventDefault();
  const { users } = this.state;
  // 分割地址字符串，转回对象
  const addressParts = users.address.split(',').map(part => part.trim());
  const updatedAddress = {
    street: addressParts[0] || '',
    city: addressParts[1] || '',
    zipcode: addressParts[2] || '',
    geo: {} // 如果需要保留原API返回的geo，可以从之前的state或者重新请求获取
  };

  // 提交更新请求
  fetch(`http://localhost:3003/users/${this.props.match.params.id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({...users, address: updatedAddress})
  })
  .then(res => res.json())
  .then(data => console.log('用户信息已更新:', data))
  .catch(err => console.error('更新失败:', err));
}

这样修改后，textarea就能正常显示街道、城市和邮政编码的组合内容，不会再出现[object Object]啦！

内容的提问来源于stack exchange，提问作者Ajay Singh Rajput