Question

例如：

我们在构造函数中有化身数据，化身内有拇指，而拇指内则是URL。我只想获取网址。任何人都有任何备用的提示吗？

{avatar: {:thumb{:url}}}


   constructor(props) {
        super(props);

        this.state = {
            id: "",
            avatar: "",
            bio: "",
            error: "",
        }
    }

获取的用户数据

  async fetchUserId()  {

         let auth_token = await AsyncStorage.getItem(AUTH_TOKEN);



  fetch("https://xxx.herokuapp.com/api/users/"+auth_token+"", {
  method: 'GET',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },

}).then((response) => response.json())
   .then((json) => {


    this.state.id = json.id

//this.state.url =  json.avatar.thumb.url



  })
    .catch((error) => {
      console.error(error);
    });

}

Answer 1

更新：

您没有将json.id和json.avatar正确设置为需要使用setState的状态

this.setState({ id: json.id,avatar: json.avatar })

解决方案之一

 constructor(props) {
        super(props);

        this.state = {
            id: "",
            avatar: {},
            bio: "",
            error: "",
            url: ""
        }

    }

getUrl = () =>{
if(this.state.avatar && this.state.avatar.thumb && this.state.avatar.thumb.url){
      this.setState({ url: this.state.avatar.thumb.url })
   } 
}

<button onClick={this.getUrl}>Get URL </button>

第二种解决方案

由于avatar来自异步，我建议您使用componentWillUpdate生命周期方法

componentWillUpdate(nextProps, nextState){
   if(this.state.avatar !== nextState.avatar){
     console.log(nextState.avatar.thumb.url)
   }
}

注意：componentWillUpdate每次更改时都会调用this.state.avatar

Answer 2

由于您无法更改状态，并且setState不处理嵌套更新，因此您需要使用以下代码来设置这种状态：

this.setState(prevState => ({
    ...prevState,
    avatar: {
        ...prevState.avatar,
        thumb: {
           ...prevState.avatar.thumb,
           url: newUrlValue
        }
    }
}))

Answer 3

赞，您可以设置：-

class App extends Component {
  state = {
    name: "",
    stars: "",
    icon: "",
      longitude: "",
    address:"",
     latitude: "",
    trails: [], isLoaded: false
  }




  handleChange = address => {
   this.setState({
      address

    });

        geocodeByAddress(address)
            .then(res => getLatLng(res[0]))
      .then(({ lat, lng }) => {
    this.setState({

      latitude: lat,
      longitude: lng,

    });
  })
 .catch(error => {
        this.setState({ isGeocoding: false });
        console.log('error', error); // eslint-disable-line no-console
      });

 }

  getUser = selected => {

var object = this.refs.Progress2;

object.innerHTML="";


 this.setState({ isGeocoding: true, address: selected });

React Native如何在数据内部设置状态数据？

3 个答案: