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

Question

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

到目前为止，我已尝试返回 API 数据以将其存储在函数内部的本地列表中，但随后我对它进行操作的访问权限为零。我想我需要 'list' 并将姓名和年龄存储在状态中，然后进行访问，但我不知道该怎么做。任何帮助将不胜感激。

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})。然后，您的渲染方法可以通过 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 中使用状态存储数据以便以后可以访问时遇到问题

Having issues trying to store data using state in React so that it is accessible later

javascript

reactjs

react-state