Question

我正在编写一个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;
}

Answer 1

通常来说，您不应该在React应用中操纵DOM或设置innerHTML。

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

如果要使用此组件之外的数据，则可能要考虑实现独立于该组件的数据存储。 Here's an example介绍您的操作方式。

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" />

Answer 2

尝试一下

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;
}

尝试在React中使用状态存储数据时出现问题，以便以后可以访问

2 个答案: