React有條件更新列表

Question

我是新來做出反應，我試圖瞭解如何更改列表中的元素。以下是我正在嘗試做的一個簡單例子。

const numbers = [1, 2, 3, 4, 5]; 
/* 
if(numbers[1] == 2) 
    numbers[1] = 5; 
else 
    numbers[1] = 0; 
*/ 
const listItems = numbers.map((number) => 
    <li>{number}</li> 
); 

我需要根據上面的註釋更新列表的一個元素。但我遇到了很多錯誤。這是在React中使用列表的錯誤方式。謝謝。

Answer 1

Array#map回調接收當前指數作爲第二PARAM，這樣你就可以使用JSX嵌套三元，而如果指數是1修改渲染項：

const numbers = [1, 2, 3, 4, 5]; 

const listItems = numbers.map((number, index) => 
    <li>{index === 1 ? (number === 2 ? 5 : 0) : number}</li> 
); 

Answer 2

首先，你需要了解你的listItems不是一個組件，它只是一個反應元素的數組。所以你需要把它們放在某個組件的渲染方法中。

class ListItemComp extends React.Component { 
    render() { 
    const numbers = [1, 2, 3, 4, 5]; 
    const listItems = numbers.map((number) => 
     <li>{number}</li> 
    ); 

    return (<ul>{listItems}</ul>); 
    } 
} 

其次，如果你想改變的數據，並且要做出反應知道，變化和重新渲染的觀點，那麼你需要調用this.setState()的地方，並確保數據的變化是可訪問從this.state。所以讓我們稍微改變一下組件。

class ListItemComp extends React.Component { 
    constructor() { 
    super() 

    const numbers = [1, 2, 3, 4, 5]; 
    this.state = { 
     numbers: numbers 
    }; 

    // first it'll render "1,2,3,4,5" 
    // wait 3 seconds, it re-render to "1,5,3,4,5" 
    setTimeout(() => { 
     if (numbers[1] == 2) 
     numbers[1] = 5; 
     else 
     numbers[1] = 0; 

     this.setState({ numbers: numbers }); 
    }, 3000); 
    } 

    render() { 
    const listItems = this.state.numbers.map((number) => 
     <li>{number}</li> 
    ); 

    return (<ul>{listItems}</ul>); 
    } 
}