如何在 React 中動態渲染數組

Question

我想動態渲染一個數組，其值會不斷變化。

我有一個父組件

const Parent = () => {
    const arr = [];
    <Button onClick={()=>{
        arr.push("some value")        
       }}
    <Child data={arr}/>
} 

export class Child extends React.Component {
    return(
            <h1>
                {this.props.data}
            </h1>
        )
}

因此，最初頁面將加載空白，只有一個按鈕。 我希望當單擊按鈕時還應該顯示 arr 值。 但是，我看到即使在將值添加到數組后也不會顯示任何值。

Answer 1

像這樣嘗試

const Parent = () => {  
const [arr, setarr] = useState([]);

  return (
    <div>
      <Button
        onClick={() => {
          setarr((oldArray) => [...oldArray, "some value"]);
        }}
      >
        Button
      </Button>
      <Child data={arr} />
    </div>  

);

子組件

export class Child extends React.Component {
  render() {
    return <h1>{this.props.data}</h1>;
  }
}

Answer 2

arr.push 不是 React 的方式。 有一種叫做狀態的東西，每次狀態改變時，組件都會重新渲染。 此外，如果您想顯示元素列表，則必須映射其值。

有關更多信息React Docs

嘗試這樣的事情（反應鈎子）：

const Parent = () => {
    const [data, setData] = useState([])
    
    return (
        <Button onClick={()=> setData([...data, "new value"])}
        <Child data={data}/>
    )
} 

const Child = (props) => {
    return (
        <div>
            <h1>Data</h1>
            <div>
                {props.data.map(item => <span>{item}</span>)}
            </div>
        </div>
    )
}