-1

我正在编写一个 React 应用程序，通过搜索（表单）从 API 中提取特定数据，存储它并使用过滤器操作它等等。到目前为止，我已经提取了数据并显示了它，但是我无法弄清楚如何使用状态来存储它，以便我可以访问它而无需进行全新的数据提取。

到目前为止，我已经尝试返回要存储在函数内部本地列表中的 API 数据，但是我拥有零访问权限来继续操作它。我想我需要将名称和年龄存储在状态中的“列表”，然后进行访问，但我就是不知道该怎么做。任何帮助将不胜感激。 

function dataPull(param) {

    const list = [
        { name: '', age: ''}
    ]

    const URLbase = "https://APIexample.com";
    const query = URLbase + param;
    const URL = URLbase + param;

    fetch(URL)
       .then(fnc(res) {
           let text = document.getElementById('textSpot');
           res.map(res => (
              <list key={res.name} age={res.age} />
           ));
           text.innerHTML = res;
}
4

2 回答 2

1

一般来说，您不应该innerHTML在 React 应用程序中操作 DOM 或设置。

如果要以组件状态存储数据，请在componentDidMount生命周期方法（或等效挂钩）中执行 fetch，然后调用this.setState({results: fetchedData}). 然后，您的渲染方法可以通过获取数据this.state.results并进行相应的渲染。（见下面的例子。）

如果您想使用该组件之外的数据，您可能需要考虑实现一个独立于该组件的数据存储。这是您如何做到这一点的示例。

const fakeData = [
  {
    name: "chewy",
    age: 900
  },
  {
    name: "chewbacca",
    age: 40
  }
];

// wait a second and then resolve with fakeData
const fakeFetch = () => new Promise((resolve) => {
  setTimeout(() => resolve(fakeData), 1000);
})

class Wookies extends React.Component {
    state = {}

    componentDidMount () {
      fakeFetch()
        .then(result => this.setState({result}));
    }

    render () {
      const {result} = this.state;
      
      if (!result) {
        // not loaded. render loading spinner or whatever.
        return <div>loading</div>;
      }

      return result.map(item => (
        <div key={item.name}>age: {item.age}</div>
      ));
    }
}

ReactDOM.render(<Wookies />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app" />

于 2019-05-24T03:37:23.123 回答
0

试试这个，

function dataPull(param) {

    const list = [
        { name: '', age: ''}
    ]

    const URLbase = "https://APIexample.com";
    const query = URLbase + param;
    const URL = URLbase + param;

    fetch(URL)
       .then(fnc(res) {
           let text = document.getElementById('textSpot');
           let items = [];
           items = res.map(res => (
              <list key={res.name} age={res.age} />
           ));
           text.innerHTML = items;
}
于 2019-05-24T05:11:03.967 回答