React Native导入json文件＆amp;阅读内容

Question

我尝试加载.json文件并阅读内容。但我得到的是这样的输出：

这是我的代码：

 import movies from './movies.json';

  /* 
  ... 
  */

  function componentWillMount() {
    return (
      fetch(movies).then((res) => res.json()).then((data) => 
      {this.setState({hugeText: data.something});
      })
    );
  }
  function searchForName(){
     var content = componentWillMount();
     alert(content);
  }

它希望将真实内容作为字符串。

Answer 1

我认为你不能像那样使用componentWillMount ......

componentWillMount() {
  fetch(movies).then((res) => res.json()).then((data) => { 
    this.setState({hugeText: data.something});
  });
}

searchForName() {
  alert(this.state.hugeText);
}

Answer 2

首先，不要使用ComponentWillMount：

来自the docs：

  

UNSAFE_componentWillMount（）在挂载发生之前被调用。它   在render（）之前调用，因此同步调用setState（）   此方法不会触发额外的渲染。通常，我们   建议使用constructor（）代替初始化状态。

     

避免在此方法中引入任何副作用或订阅。   对于这些用例，请改用componentDidMount（）。

现在，在组件中设置一个状态变量，以保存将从该API调用中收到的值：

constructor(props){
  super(props);
  this.state = { hugeText: '' }
}

如果只想将对象表示为字符串，请使用：

JSON.stringify(your_object_here)

像这样使用它：

function componentDidMount() {
  fetch(movies).then((res) => res.json())
    .then((data) => {
      this.setState({hugeText: JSON.stringify( data.something ) } , () => {
        alert(this.state.hugeText); // This will happen AFTER the state has been set
      });
    })
}

例如，之后可以在渲染函数中使用this.state.hugeText。

也可以在the setState API阅读。