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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 1810 天前的主题，其中的信息可能已经有所发展或是发生改变。

 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 条回复 2020-12-11 16:38:43 +08:00

qwertty01

2020-12-11 16:38:43 +08:00

```
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>)
}
```