反应钩子不更新

Question

React 和 JS 对我来说是新的，所以我在这方面仍然有点糟糕。在整个情况下，我最不了解的是 React Hooks 以及它们有时不更新的问题。我知道为什么以及如何避免多次调用二传手之类的事情，但这个特定的问题对我来说很难理解，甚至谷歌正确。要么我在这里找到基于类的 this.state 的东西，要么找到未回答的问题。

如何在需要时更新钩子。例如，这是来自材质UIAutocomplete组件。当我在其中选择一个选项时，我想将其值放入 newFKSchema const 中，getTables使用它。此方法中只有前三行对此问题很重要。但console.log表明newFKSchema是空的。如果我选择另一个选项，newFKSchema 将包含上一个选项。所以就像一圈延迟。我不明白为什么会发生这种情况，以及如何让它像我想要的那样工作。很抱歉代码混乱，我已经进行了一些尝试来使其工作。

如果这对您来说不难，请在提供解决方案后稍微解释一下。

const allSchemas = [
'',
'ADDITIONAL',
'BOOKKEEPING',
'CB',
'DEPOSIT',
'DOGORG',
'GENERALUSE',
'NSI',
'PAYMENTS',
'PLASTIC',
'SAFECELL',
'SWIFT',
'TARIFF',
];
const [newFKSchema, setNewFKSchema] = React.useState(allSchemas[0]);
const getTables = (schema) => {
var newSchema = schema;
setNewFKSchema(newSchema);
console.log(newFKSchema);
if (newFKSchema !== '') {
superagent
.get('/api/tech')
.query({schema: schema})
.then((response) =>{
if (response.status === 200) {
const newTables = [];
response.body.forEach(e => {newTables.push(e)});
setAllTables(newTables);
}
})
.catch(error => {
if (error.response.statusCode === 400) {
alert("No tables were found!");
}
}); 
}
}
<FormControl fullWidth>
<Autocomplete
id="autocomplete-schema"
options={allSchemas.slice(1)}
value={newFKSchema}
onChange={(event, value) => {setNewFKSchemaError(false); getTables(value)}} //setNewFKSchema(value); 
renderInput={(params) => <TextField {...params} label="Schema name" variant="outlined" fullWidth />} />
<FormHelperText className={classes.formHelper}>
{newFKSchemaError ? "Needs input!" : ''} 
</FormHelperText>
</FormControl>  

Answer 1

好的，让我们来看看这里发生了什么：

在onChange触发器中调用getTables(value)，参数为event和value。

value设置为newFKSchema，您将其定义为allSchemas[0]，即''

然后你这样做：

const getTables = (schema) => {
var newSchema = schema;
setNewFKSchema(newSchema);
console.log(newFKSchema);

我们知道模式是''的，所以newSchema也会被''，setNewFKSchema也会将模式设置为''，显然控制台日志也会记录''

那么，你到底期望会发生什么？

Answer 2

React 状态更新是异步的.log并且您正在执行控制台在setNewFKSchema之后不久，因此您会看到以前的值。

修复

const getTables = (schema) => {
var newSchema = schema;
setNewFKSchema(newSchema);
console.log(newFKSchema); //<------ don't do this
console.log(newSchema);//<------ do this
if (newFKSchema !== '') {
...

您可以对代码进行的一项改进是简单地对onChange执行setnewFKSSchema，并使用具有newFKSSchema作为依赖项的useEffect。这基本上会调用你的 api 并在你做选择时做一些事情。

喜欢这个

...
useEffect(() => {
// var newSchema = schema;
//setNewFKSchema(newSchema);
console.log(newFKSchema); //<---- this will always print latest value
if (newFKSchema !== '') {
superagent
.get('/api/tech')
.query({schema: schema})
.then((response) =>{
if (response.status === 200) {
const newTables = [];
response.body.forEach(e => {newTables.push(e)});
setAllTables(newTables);
}
})
.catch(error => {
if (error.response.statusCode === 400) {
alert("No tables were found!");
}
}); 
}
}, [newFKSSchema])

自动完成

<Autocomplete
id="autocomplete-schema"
options={allSchemas.slice(1)}
value={newFKSchema}
onChange={(event, value) => {setNewFKSchemaError(false); setNewFKSchema(value)}} 
renderInput={(params) => <TextField {...params} label="Schema name" variant="outlined" fullWidth />} />

Answer 3

我会在useEffect中使用位置getTables，并将newFKSchema作为依赖项

例

const allSchemas = [
'',
'ADDITIONAL',
'BOOKKEEPING',
'CB',
'DEPOSIT',
'DOGORG',
'GENERALUSE',
'NSI',
'PAYMENTS',
'PLASTIC',
'SAFECELL',
'SWIFT',
'TARIFF',
];
const { FormControl, FormHelperText, TextField } = window.MaterialUI;
const { Autocomplete } = window.MaterialUILab;
const { useState, useEffect } = React;
const renderInput = (params) => <TextField {...params} label="Schema name" variant="outlined" fullWidth />
const getTables = (schema) => Promise.resolve([1,2,3])
const App = () => {
const [{error, schemas, schema}, setData] = useState({
error: false,
schemas: [],
schema: null,
});
const [tables, setTables] = useState([]);

useEffect(() => {
setData(data => ({
...data,
schemas: allSchemas
}))

}, []);

useEffect(() => {
console.log(schema);
if(!schema) {
return () => {};
}

getTables(schema).then(result => {

setTables(schema);

})

}, [schema]);

const onChange = (event, schema) => {
setData(data => ({
...data,
schema,
error: schema ? false : true
}))
}
return <FormControl fullWidth>
<Autocomplete
id="autocomplete-schema"
options={schemas}
value={schema}
onChange={onChange}
renderInput={renderInput} />
<FormHelperText>
{error ? "Needs input!" : ''} 
</FormHelperText>
</FormControl>  
}
ReactDOM.render(
<App />,
document.getElementById('root')
);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>
<div id="root"></div>
<script src="https://unpkg.com/material-ui-lab-umd@4.0.0-alpha.32/material-ui-lab.development.js"></script>
<div id="root"></div>