Question

我有2个组件：Locatione.js和Map.js

在Locatione.js中，我获得了用户的位置，然后将其置于状态，并将其作为props传递给了Map.js组件。

问题在于道具显示为空。我在这里想念什么？


export default class Locatione extends Component {
  state = {
    location: null
  };

  componentDidMount() {
    this._getLocationAsync();
  }

  _getLocationAsync = async () => {
    let location = await Location.getCurrentPositionAsync({
      accuracy: Location.Accuracy.BestForNavigation
    });
    this.setState({ location });
    console.log("log this pls", this.state); // this is logging the right location object
  };

  render() {
    return (
      <Map locatione={this.state} /> // when accesing this props in Map, I'm getting **null**
    );
  }
}

这里是我的地图组件


export default class Map extends React.Component {


componentWillMount() {
  console.log("i want locatione here as props", this.props) // props here appear as null
}

Answer 1

在当前版本的react中，componentWillMount方法为UNSAFE，因此您不应使用它。您的子组件中有null，因为在第一个渲染中它为null。当您调用setState然后在子级中收到新值时，将重新渲染该组件。您应该基于this.state.location有条件地显示地图，或者如果地图组件需要正确的值，则在位置为null时使用加载组件。

我通过状态作为道具，但它显示为null。为什么？

1 个答案: