后退按钮禁用后不会再次启用

Question

这是我使用的代码。问题是，一旦后退按钮被禁用，它不会得到启用时，我单击下一个按钮。谁能帮我弄清楚我做错了什么吗?

类App扩展React。组件{构造函数(道具){超级(道具)这一点。状态= {数据:[],开始:1、disabledNext:假的,disabledBack:假

}
}
componentDidMount() {
this.displayImages(this.state.start)

}

displayImages(a){
axios
.get(`https://jsonplaceholder.typicode.com/photos/?_start=${a}&_limit=5`)
.then(res => { 
this.setState({
data : res.data
});
}) 
}
handleBack = () => {
let prev = this.state.start - 5
let disabledBack = false
if (prev <= 1){
prev = 1
disabledBack = true
}
this.setState({ start: prev , disabledBack: disabledBack })
this.displayImages(prev)

};

handleNext = () => {
let newStart = this.state.start + 5
this.setState({ start: newStart })
this.displayImages(newStart)
};

render() {
const {  data , disabledBack } = this.state
return(
<div>
{
data.map(item => {
return(
<img src={item.thumbnailUrl} alt="img"/>
)
})
}

<br></br> <br></br>
<button type="button" onClick={this.handleBack} disabled={disabledBack}>Back</button>
<button type="button" onClick={this.handleNext} >Next</button>
</div>
)
}

}

Answer 1

如果你能理解prev和next btn是如何工作的，那么你就可以在react中做很多事情。

代码:https://codesandbox.io/s/inventory-progress-u2v90

const App = () => {
const [state, setState] = useState([
{ item: "1", desc: "1", active: true },
{ item: "2", desc: "2", active: false },
{ item: "3", desc: "3", active: false }
]);
const stateIndex = state.findIndex(function (item) {
return item.active;
});
return (
<div>
{state.map((item) => {
return (
<p style={{ backgroundColor: item.active ? "red" : "gray" }}>
{item.desc}
</p>
);
})}
<button
onClick={() => {
stateIndex > 0 &&
setState([
...state.map((item, iIndex) =>
iIndex === stateIndex
? {
...item,
active: false
}
: {
...item,
active:
iIndex ===
stateIndex -
1
? true
: false
}
)
]);
}}
>
Prev
</button>
<button
onClick={() => {
stateIndex + 1 < state.length &&
setState([
...state.map((item, iIndex) =>
iIndex === stateIndex
? {
...item,
active: false
}
: {
...item,
active:
iIndex ===
stateIndex  +
1
? true
: false
}
)
]);
}}
>
Next
</button>
</div>
);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>