救救孩子吧， React 函数父子组件数据更新流程没有搞明白

資深大佬 : qwertty01 3

 function App() {     const [data, setData] = useState([])     const [sqlType, setSqlType] = useState("ALL")      useEffect(() => {         axios.get(updateSql_findAll, {             params: {                 actualSqlType: sqlType             }         }).then(response => {             console.log(response.data[0].second)             setData(() => {                 return response.data             })         })     }, [sqlType])      const onSqlTypeSelect = (event) => {         setSqlType(event.target.value)     }      return (         <div>             <select onChange={(event => onSqlTypeSelect(event))}                      style={{width: "200px"}}>                 <option value={"ALL"}>ALL</option>                 <option value={"SELECT"}>SELECT</option>             </select>             <Test data={data[0]}/>         </div>     ) }  const Test = (props) => {     console.log(props.data.second)     return (<div>         Test     </div>) }

我想的更新流程是，我选择 Sql 类型，useEffect 调用，data 数据变化，重渲染子组件然而实际的流程是，我选择 Sql 类型，重新渲染了子组件，useEffect 调用，data 数据变化，子组件没有进行渲染

大佬有話說 (1)

主資深大佬 : qwertty01

“`
function App() {
const [data, setData] = useState([])
const [sqlType, setSqlType] = useState(“ALL”)

useEffect(() => {
axios.get(updateSql_findAll).then(response => {
console.log(“use effect 调用”)
setData(() => {
return response.data
})
})
}, [sqlType])

const onSqlTypeSelect = (event) => {
setSqlType(event.target.value)
}

return (
<div>
<select onChange={(event => onSqlTypeSelect(event))}

style={{width: “200px”}}>
<option value={“ALL”}>ALL</option>
<option value={“SELECT”}>SELECT</option>
</select>
<Test/>
</div>
)
}

const Test = () => {
console.log(“Test 渲染调用”)
return (<div>
Test
</div>)
}
“`