Question

我的父组件中有两个子组件并设置了路由。 Child1 组件的按钮更新父组件的状态，我想将该状态的更新版本作为道具传递给 child2 组件。问题是，虽然状态在父组件中明显更新（我检查了它），但它没有传递给 child2 组件（而是传递了旧版本的状态）。我认为这是因为 getdData 函数（在父组件中）在 child2 组件被渲染后执行。我该如何解决这个问题，以便通过正确的状态？

代码如下：

父组件：

import './App.css';
import Questions from './components/questions';
import DropDownDifficulty from './components/dropDownDifficulty';
import {useState} from 'react'
import axios from 'axios';
import {BrowserRouter as Router, Route, Redirect} from 'react-router-dom'

function App() {
  
  const [data, setdata] = useState([])
  const getdData = (values)=>{
    setdata(values)
  }
  return (
    <div className="App">
      <Router>
        <Route exact path='/'>
          <DropDownDifficulty sendData={getdData}/>
        </Route>
        <Route exact path = '/quiz'>
          <Questions specs={data}/>
        </Route>
      
      </Router>
    </div>
  );
}

export default App;

Child1 组件的按钮：

<Button  disabled={buttonDisabled} className='button' variant="contained" color="primary" onClick={()=>sendData([category, Difficulty])}>
            Start Quiz
        </Button>

child2 组件：

import React from 'react'
import Question from './question'


export default function Questions({specs}) {
    console.log(specs)
    return (
        <div>
        </div>
    )
}

Answer 1

简单的解决方案：

1.在传递给 props 之前检查正确的值

<div className="App">
      <Router>
        <Route exact path='/'>
          <DropDownDifficulty sendData={getdData}/>
        </Route>
        {data?.length > 0 && <Route exact path = '/quiz'>
          <Questions specs={data}/>
        </Route>}
      </Router>
    </div>

只有在正确的数据到来后才能使用useEffect并监听props和show value


import {useEffect} from 'react'
import Question from './question'


export default function Questions({specs}) {
    const [showIfCorrect,setShowIfCorrect]=useState(false)
    useEffect(()=>{
        if(specs){
          // Check if it is correct
          setShowIfCorrect(true)
         }
    },[specs])
    return (
        <div>
          {showIfCorrect && <div>Correct Question</div>}
        </div>
    )
}

使用 Context Api 并从兄弟组件（DropDownDifficulty）更新状态并将其传递给 Questions 组件

关于如何在上下文中实现 api 参考下面的代码

将更新的父状态传递给子道具 React.js

1 个答案: