Question

我正在尝试建立一个反应应用程序，在该应用程序中显示一个按钮列表，用户可以按一个按钮并转到带有有关国家/地区信息的页面。我正在使用public function updateProfileCharacteristics(Request $request) { $user = Auth::user(); $user->update([ 'date_of_birth' => Date('Y-m-d',strtotime($request->date_of_birth)), 'age' => Carbon::now()->diffInYears($request->date_of_birth), 'updated_at' => Carbon::now() ]); return redirect()->route('profile.show', [$user->username]); }函数以编程方式创建按钮。我正在使用SQL数据库存储国家/地区名称和有关国家/地区的信息，然后调用烧瓶路径将数据提取到我的react应用程序中。为此，我正在使用.map函数。

这是我希望发生的过程：我在App.js主路由器组件中设置了一些有状态变量。然后，我通过按钮和async函数将setState函数作为道具传递给组件。对于每个按钮，可以选择设置App.js组件中变量的状态。然后，我将App.js中的变量设置为与单击的按钮关联的值。从那里，我可以将这些有状态变量传递到我的国家/地区页面组件中进行显示。

实际发生的情况：我将道具传递到我的国家/地区组件，期望国家/地区和国家/地区详细信息会随之传递，但最终得到.map。好像未定义可能是数据集的最后一个元素，因为我之前将津巴布韦作为结果。这是我的App.js路由器代码：

undefined

这是我的目标网页的代码（具有export default function App() { const [cname, setCName] = useState('') const [pdf, setPdf] = useState('') const [details, setDetails] = useState('') return ( <div className="App"> <BrowserRouter> {/* <Route exact path="/" component = { Home }/> */} <Route path="/cia" component = {(props) => <CIALanding {...props} setCName={setCName} setPdf={setPdf} setDetails={setDetails}/>}/> <Route path="/country" component={(props) => <Country {...props} setCName={setCName} details={details} cname={cname}/>}/> <Route path="/countrypage" component={CountryPage}/> </BrowserRouter> </div> ); }功能）

.map

这是我国家代码的代码

export default function CIALanding(props) {


    const [countriesList, setCountriesList] = useState([])

    const getCountries = async () => {
        const response = await fetch('http://127.0.0.1:5000/countries');
        const data = await response.json();
        setCountriesList(data['country_list'].map((country) => {return (
            <Link to={{pathname:'/country',
            }}>
            <Country cname1={country[0]} details={country[2]} setCName={props.setCName}>{country[0]}</Country>
            </Link>
        )}))
    }

    useEffect(() => {
        getCountries()
    },[])
        return (
            <div>
            {countriesList}
            </div>
        )

}

非常感谢您的帮助！

Answer 1

我不会完全回答您的问题，但是我建议您进行一些重构，也许可以解决您的问题。

首先，我将获取代码移至App组件，它将使组件可以更轻松地访问此数据（我对获取状态更改进行了一些很好的处理）。在这里，只有成功提取数据后，您才会呈现正确的路由。

const App = () => {
  const [status, setStatus] = useState(null);
  const [countries, setCountries] = useState([]);

  const getCountries = async () => {
    setStatus('loading');

    try {
      const response = await fetch('http://127.0.0.1:5000/countries');
      const data = await response.json();

      setCountriesList([...data['country_list']]);
      setStatus('success')
    } catch (error) {
      setSatus('error');
    }
  }

  useEffect(() => {
    getCountries();
  }, [])

  if (!status || status === 'error') {
    return <span>Loading data error</span>
  }

  if (status === 'loading') {
    return <span>Loading...</span>
  }

  return (
    <div className="App">
      <BrowserRouter>
        <Route path="/cia" component={(props) => <CIALanding {...props} countries={countries} />
        <Route path="/country/:countryId" component={(props) => <Country {...props} countries={countries} />    
      </BrowserRouter>
    </div>
  );
 }

第二件事-要显示正确的国家/地区页面，您无需将任何数据设置为状态，只需要做的就是设置路线/country/:countryId和具有正确路径的链接，其中countryId可以是唯一的国家/地区识别码或代码。通过这样的设置，组件中所需的数据仅是国家/地区的数组，而要加载的国家/地区由路由决定

着陆组件将变得非常简单（您绝对不应该将React组件保持在状态，而只有数据）

const CIALanding = ({countries}) => (
  <div>
    {
      countries.map(({countryName, countryId}) => (
        <Link to={`/country/${countryId}`}>{countryName}</Link>
      ))
    }
  </div>
)

因此，现在我们有了不错的具有正确链接的国家/地区列表。然后国家/地区页面将知道要通过参数countryId

显示哪些数据

const Country = ({match, countries}) => {
  //match object is passed by Route to this component and inside we have params object with countryId
  const {countryId} = match.params;
  const country = countries.find(country => country.countryId === countryId);

  if (country) {
    return (
      <div>
        Show info about selected country
      </div>
    );
  }

  return (
    <div>
      Sorry, cannot find country with id {countryId}
    </div>
  )
}

您可以通过单击链接并另外在浏览器中输入路径，例如.../country/ENG来访问正确的国家页面（我不知道您的数据结构，因此请记住将正确的数据用于countryId）；）抱歉，这不能解决您的问题，但我希望它至少包含一些重构的好主意;）

在地图函数中反应设置有状态变量

1 个答案: