reactjs 在React中使用React挂接创建数据模型

ecbunoof 于 2023-01-08 发布在 React

关注(0)|答案(2)|浏览(126)

我对React钩子很陌生。我以前在react中使用过基于类的组件，并使用了像setState这样的方法。然而，这是我第一次将React钩子与基于函数的组件一起使用。所以可能标题也不正确。下面是我尝试做的解释。我尝试创建一个dataModel，它将包含使用不同API获取的所有数据。然后这个模型将被传递给不同的组件。这个dataModel将在页面初始加载时创建。在下面的代码中，我声明了一个变量dataModel，它将包含keys，每个key将有一个数组或字典。我尝试了一些选项，但它不起作用。我已经把我尝试的代码。我很感激你能帮我修好它。

import './App.css';
import Query from './components/landing/query';
import React, {useState,useEffect} from 'react';

function App() {  
  const [dataModel,setDataModel] = useState({
    yearOptions: [],
    locOptions: []
  })
  const fetchYear = async()=>{
    await fetch(
      "http://localhost:3002/getYear"
    ).then((response)=>response.json())
    .then((data)=>{
      setDataModel(
           data.map((x)=>{
           let eachx = {key:x.key, text:x.value,value:x.value}
           dataModel.yearOptions.concat(eachx)
  })
      )
    })
  }

  const fetchLoc = async()=>{
    await fetch(
      "http://localhost:3002/getYear"
    ).then((response)=>response.json())
    .then((data)=>{
      setDataModel(
        data.map((x)=>{
          let eachx = {key:x.key, text:x.value,value:x.value}
          dataModel.locOptions.concat(eachx)
      })
      )
    })
  }

  useEffect(() => {
    fetchYear();
    fetchLoc();
  }, []);
 

  return (
    <div className="App">
      <header className="App-header">      
          React Based FrontEnd and Nodejs Based Rest API Demo Project
      </header>

      <Query props={{model:dataModel}}/>
    </div>
    
  );
}

export default App;

reactjs

来源：https://stackoverflow.com/questions/75022825/create-a-data-model-using-react-hooks-in-react

2条答案

按热度按时间

hlswsv351#

你违反了useState的使用方式。这不像在类组件中，要么你应该使用两个状态变量来存储状态，要么你应该单独更新状态，正如你可能知道的，如果状态没有改变，react将不会重新呈现。和对象文本不显示状态的任何更改，因为它是通过JS中的引用访问的。您可以使用ES6扩展运算符来实现这一点。这是两个例子

const [yearOptions,setYearOptions] = useState([])
const [locOptions,setLocOptions] = useState([])

const fetchYear = async()=>{
    await fetch(
      "http://localhost:3002/getYear"
    ).then((response)=>response.json())
    .then((data)=>{
      setYearOptions(
           data.map((x)=>{
           let eachx = {key:x.key, text:x.value,value:x.value}
           dataModel.yearOptions.concat(eachx)
  })
      )
    })
  }

  const fetchLoc = async()=>{
    await fetch(
      "http://localhost:3002/getYear"
    ).then((response)=>response.json())
    .then((data)=>{
      setLocOptions(
        data.map((x)=>{
          let eachx = {key:x.key, text:x.value,value:x.value}
          dataModel.locOptions.concat(eachx)
      })
      )
    })
  }

// then pass the data combined to the component
<Query props={{yearOptions, locOptions}}/>

这是第二种方法

const [dataModel,setDataModel] = useState({yearOptions: [], locOptions: []})

// if you use your state like above, then you need to do below
// to update the state properly
const fetchYear = async()=>{
    await fetch(
      "http://localhost:3002/getYear"
    ).then((response)=>response.json())
    .then((data)=>{
      const yearData = data.map((x)=>{
           let eachx = {key:x.key, text:x.value,value:x.value}
           dataModel.yearOptions.concat(eachx)
      })
     const tempState = dataModal;
     tempState.yearOptions = yearData;

     // observe this change
     setDataModel({...tempState})
    })
  }

//same thing should do for the locOptions also in fetchLoc function

在我看来，第一种选择是最好的，我想大多数开发人员都会同意我的观点

赞(0）回复(0）举报 2023-01-08

dy1byipe2#

正如第一个答案中提到的，第一个选项是有效的。然而，对于第二个选项，代码有一小部分变化。下面是如何设置数据模型的第二个选项的代码。

const fetchYear=async()=>{
    let tempData = []
    await fetch(
      "http://localhost:3002/getYear"
    ).then((response)=>response.json())
    .then((data)=>{
      data.map((x)=>{
        let eachx = {key:x.key, text:x.value,value:x.value}
        tempData.push(eachx)  
      })
      dataModel.yearOptions = tempData
      setDataModel({...dataModel})
    })
  }

赞(0）回复(0）举报 2023-01-08

我来回答

reactjs 在React中使用React挂接创建数据模型

2条答案

相关问题

热门标签

最新问答